Marionette.js CollectionView，仅渲染特定的模型

Marionette.js CollectionView, only render specific models

本文关键字：模型 js CollectionView Marionette      更新时间：2023-09-26

我正在重构我的Backbone.js应用程序以使用Marionette.js，并且我正试图用CollectionView来解决问题。

假设我有几个型号为Cow:的ItemView

// Declare my models.
var Cow = Backbone.Model.extend({});
var Cows = Backbone.Collection.extend({
  model: Cow
});
// Make my views
var GrassPatch = Marionette.ItemView.extend({
  tagName:  'div',
  template: "<section class='grass'>{{name}}</section>",
})
var Pasture = Marionette.CollectionView.extend({});
// Instantiate the CollectionView,
var blissLand = new Pasture({
  itemView: GrassPatch;
});
// Now, add models to the collection.
Cows.add({
  name: 'Bessie',
  hasSpots: true
});
Cows.add({
  name: 'Frank',
  hasSpots: false
});

下面是诀窍。我只想要牧场上有斑点的奶牛。在定义我的CollectionView（牧场）时，我如何告诉它只关注那些hasSpots===true的模型？

理想情况下，我希望在所有事件中都有CollectionView过滤器，但最低限度地，我如何仅根据它们的模型属性呈现一些ItemView？

更新

我用了David Sulc的例子，这是一个简单的解决方案。下面是一个示例实现：

  this.collection = Backbone.filterCollection(this.collection, function(criterion){
    var len = String(criterion).length;
    var a = criterion.toLowerCase();
    return function(model){
      var b = String(model.get('name')).substr(0, len).toLowerCase();
      if (a === b) {
        return model;
      }
    };
  });
  this.collection.add({ name: 'foo' });
  this.collection.add({ name: 'foosball' });
  this.collection.add({ name: 'foo bar' });
  this.collection.add({ name: 'goats' });
  this.collection.add({ name: 'cows' });
  this.collection.filter('foo');
  // -> returns the first three models

Marionette在v2.4.1中为您处理此问题。

请参阅CollectionView.filter方法。

以下来自文档：

  var cv = new Marionette.CollectionView({
    childView: SomeChildView,
    emptyView: SomeEmptyView,
    collection: new Backbone.Collection([
      { value: 1 },
      { value: 2 },
      { value: 3 },
      { value: 4 }
    ]),
    // Only show views with even values
    filter: function (child, index, collection) {
      return child.get('value') % 2 === 0;
    }
  });
  // renders the views with values '2' and '4'
  cv.render();
  // change the filter
  cv.filter = function (child, index, collection) {
    return child.get('value') % 2 !== 0;
  };
  // renders the views with values '1' and '3'
  cv.render();
  // remove the filter
  // note that using `delete cv.filter` will cause the prototype's filter to be used
  // which may be undesirable
  cv.filter = null;
  // renders all views
  cv.render();

正如其他人所建议的，实现这一点的最佳方法是过滤集合，使其仅包含要显示的模型，并将fitlered集合传递给CollectionView进行渲染。

您可以在此处看到一个工作示例：http://davidsulc.github.io/marionette-gentle-introduction/#contacts使用右上角的输入字段筛选联系人，以仅显示包含该文本的模型（例如"li"）。

这是通过使用一种处理过滤的特殊集合类型来实现的：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js

它在这里被实例化：https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13

这个代码来自我关于木偶的书。

@Will M过滤集合的建议是实现这一点的合适方法。

有时由于某些自定义逻辑，您无法筛选集合，并且您希望这些模型在集合中，但不希望它们被渲染。要实现它，您可以：

var Pasture = Marionette.CollectionView.extend({
     addChild: function(child, ChildView, index) {
               if(child.get('hasSpots')) {
                    return Marionette.CollectionView.prototype.addChild.call(this, child, ChildView, index);
               }
     }});

尽管我同意过滤集合是一种更好的方法。

相关文章：