Question

我有一个观点，我想在CompositiveView中重用，可重用的视图需要被提供一个具有一组特定属性的模型，并且传递给CompositiveView的集合的每个成员都有做属性但封装在内部对象中，如下所示：

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

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

Answer 1

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

＆＃13;

$(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
    }));
    
});

＆＃13;

<!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>

＆＃13;

Answer 2

您可以使用childViewOptions（补充childView）不仅为子视图提供其他构造函数选项，还为覆盖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

2 个答案: