Marionette CompositeView -- 传递给 ChildView 的控制模型

Question

我有一个视图，我想在 CompositiveView 中重用，需要为可重用视图提供一个具有特定属性集的模型，并将集合中的每个成员传递给 CompositiveView 有属性但封装在一个内部对象中，像这样：

{
    foo: "foo",
    bar: "bar"
    objWithStuffThatINeed: {
        ...
    }
}

可重用视图必须了解此层次结构，我无法更改该视图以使其意识到这一点。我想知道是否有一种方法可以将 only 和 objWithStuffThatINeed 传递给 childView 而不是当前集合迭代中的整个项目。

Answer 1

您可以更改仅使用您需要的字段的 ItemView 模型。

$(function() {
    // You reusable view.       
    var ExampleItemView = Backbone.Marionette.ItemView.extend({
        tagName: "li",
        template:  _.template('<%- baz%>'),
    });
    
    var ExampleCompositeView = Backbone.Marionette.CompositeView.extend({
    
        tagName: "ul",
        childView: ExampleItemView,
        template: _.template(''),
        
        buildChildView: function(child, ChildViewClass, childViewOptions) {
          // create the child view instance
          var view = new ChildViewClass( {
            model: new Backbone.Model(child.get('objWithStuffThatINeed'))
          });
          // return it
          return view;
        }
        
    });
    
    var testCollection = new Backbone.Collection(
      [{
          foo: 'foo1',
          bar: 'bar1',
          objWithStuffThatINeed: {
            baz: "baz1"
          }
      },
      {
          foo: 'foo2',
          bar: 'bar2',
          objWithStuffThatINeed: {
            baz: "baz2"
          }
      }
      ]
    );
    
    var region = new  Backbone.Marionette.Region({
      el: '.main-region'
    });
    
    region.show(new ExampleCompositeView({
      collection: testCollection
    }));
    
});

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@*" data-semver="2.1.4" src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script data-require="underscore.js@*" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script data-require="backbone.js@*" data-semver="1.1.2" src="    //cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
    <script data-require="marionette.js@*" data-semver="2.2.2" src="http://cdnjs.cloudflare.com/ajax/libs/backbone.marionette/2.2.2/backbone.marionette.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <div class="main-region"></div>
  </body>

</html>

Answer 2

可以使用childViewOptions (which complements childView) to not only provide additional constructor options for child views, but also to override constructor options provided by CollectionView本身，即model.

var MyCompositeView = Backbone.Marionette.CompositeView.extend({

  childView: MyChildView,

  childViewOptions: function (child) {
    // Override the model otherwise provided by CollectionView
    return {
      model: new Backbone.Model(child.get('objWithStuffThatINeed'))
    };
  },

  ...

});

原来的buildChildView是这样的：

buildChildView: function(child, ChildViewClass, childViewOptions) {
  var options = _.extend({model: child}, childViewOptions);
  return new ChildViewClass(options);
}

如果您需要做更多的事情来创建子视图，而不是使用选项调用对象构造函数，您也可以覆盖它。

Marionette CompositeView -- 传递给 ChildView 的控制模型

Marionette CompositeView -- Control Model Passed to ChildView

marionette