Marionette.js的CollectionView，只会使具体型号 [英] Marionette.js CollectionView, only render specific models

问题描述

我重构我Backbone.js的应用程序中使用Marionette.js，我试图环绕我的头的CollectionView 。

假设我有几个 ItemView控件 s的模型牛：

  //声明我的模型。
变种牛= Backbone.Model.extend（{}）;
VAR奶牛= Backbone.Collection.extend（{
  型号：牛
}）;//使我的看法
VAR GrassPatch = Marionette.ItemView.extend（{
  标签名：'格'，
  模板：＆lt;节类='草'＆GT; {{名}}＆LT; /段＆gt;，
}）VAR牧场= Marionette.CollectionView.extend（{}）;//实例化的CollectionView，
VAR blissLand =新牧场（{
  ItemView控件：GrassPatch;
}）;//现在，添加模型集合。
Cows.add（{
  名称：贝茜，
  hasSpots：真
}）;Cows.add（{
  名称：'弗兰克'，
  hasSpots：假的
}）;
 

现在这里的伎俩。我只想奶牛在我草场斑点。怎么样，在确定我的CollectionView（草），我告诉它只注意他们的那些模型 hasSpots === 真正？

我非常希望能有过滤器的CollectionView在所有事件，但最低限度，我怎么只呈现基于他们的模特属性一些ItemViews？

更新

我用大卫Sulc的例子，这摸索出一个简单的解决方案。下面是一个例子实现：

  this.collection = Backbone.filterCollection（this.collection，功能（标准）{
    VAR LEN =字符串（标准）。长度;
    变种一个= criterion.toLowerCase（）;
    复位功能（模型）{
      变种B =字符串（model.get（'名'））SUBSTR（0，LEN）.toLowerCase（）。
      如果（一个=== B）{
        回归模型;
      }
    };
  }）;  this.collection.add（{名称：'富'}）;
  this.collection.add（{名称：桌上足球}）;
  this.collection.add（{名称：'富巴'}）;
  this.collection.add（{名称：'山羊'}）;
  this.collection.add（{名称：'牛'}）;  this.collection.filter（'富'）;  //  - ＆GT;返回前三款车型
 

解决方案

的建议他人，实现这一目标的最佳途径是过滤收集到只包含要显示的模型以及fitlered收集传递给的CollectionView进行渲染。

您可以在这里看到一个工作示例： http://davidsulc.github.io /木偶温和的介绍/＃接触与右上角的输入字段筛选联系人显示包含文本的型号（如李）。

这是通过使用过滤处理一个特殊的集合类型实现：<一href=\"https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js\" rel=\"nofollow\">https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js

和它被实例化在这里：<一href=\"https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13\" rel=\"nofollow\">https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13

这code是从木偶我书。

I am refactoring my Backbone.js application to use Marionette.js, and I am trying to wrap my head around a CollectionView.

Suppose I have several ItemViews with the model Cow:

// 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
});

Now here's the trick. I only want cows with spots in my pasture. How, in defining my CollectionView (Pasture), do I tell it to only pay attention to those models whose hasSpots === true?

Ideally I would like to have the CollectionView filter that in all events, but minimally, how do I only render some ItemViews based on their model properties?

UPDATE

I used David Sulc's examples and this worked out to an easy solution. Here's an example implementation:

  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

解决方案

As suggested by others, the best way to achieve this is to filter the collection to contain only the models you want to display, and pass that fitlered collection to a CollectionView for rendering.

You can see a working example here: http://davidsulc.github.io/marionette-gentle-introduction/#contacts Filter contacts with the input field on the top right to display only models containing that text (e.g. "li").

This is achieved by using a special collection type that handles filtering: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/entities/common.js

And it gets instantiated here: https://github.com/davidsulc/marionette-gentle-introduction/blob/master/assets/js/apps/contacts/list/list_controller.js#L13

This code is from my book on Marionette.

这篇关于Marionette.js的CollectionView，只会使具体型号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！