骨干网过滤收发

Question

我有一个收藏，比如说20件……我想过滤我的结果并显示其中的5个。索引是5到9，比方说..

我的html

{{#each myCol}} <br>
   <div id="{{this.controlName}}"></div>
{{/each}}

到目前为止，我的js

var myData = {
    myCol: this.collection.models
};

for ( var i = 5; i < 10; i++) {
    var newCol = this.collection.at(i);
}

所以很明显，它仍然在绘制所有的集合项目，而不是我想要的索引5到9…

Answer 1

集合中的models只是一个数组，因此您可以使用slice

var five_to_nine = this.collection.models.slice(5, 10);

或者，如果您不想直接访问集合的models，可以在其中添加一个toArray：

var five_to_nine = this.collection.toArray().slice(5, 10);

如果您经常这样做，还可以将slice方法添加到您的集合中：

var C = Backbone.Collection.extend({
    //...
    slice: function(begin, end) {
        return this.models.slice(begin, end);
    }
});

然后你可以简单地：

var five_to_nine = this.collection.slice(5, 10);

但是，您的five_to_nine将是一个模型数组，因此如果您的模板需要，您必须手动对它们执行toJSON操作：

var json = _(five_to_nine).map(function(m) { return m.toJSON() });

Answer 2

也许是这条路？

var newCol = []
for ( var i = 5; i < 10; i++) {
    newCol.push(this.collection.at(i));
}
var myData = {
    myCol: newCol
};

Answer 3

对于使用backbone的过滤集合，最好的方法是获取集合，并返回一个子集过滤的集合，这也将使代码更具可重用性

要创建过滤器，您的集合中应该有一个已过滤的函数

var MyCollection = Backbone.Collection.extend ({
  filtered : function ( min , max) { 

我建议使用UnderScore过滤器，它将返回true表示有效，false表示无效，其中true是您要查找的。使用this.models获取当前集合模型使用model.get( '‘)获取要检查的元素

    var results = _.filter( this.models, function ( model ) {           
        if ( model.get('index') >= min && model.get('index') <= max ) 
        return true ; 
        return false ;
    });

然后使用下划线映射结果并将其转换为JSON，如下所示

    results = _.map( results, function( model ) { return model.toJSON()  } );

最后返回一个仅包含结果的新主干集合

    return new Backbone.Collection( results ) ;

或者，如果您不想保留集合中的所有数据，而只保留过滤后的数据，则应重置集合并跳过上述返回，如下所示

    this.reset( results ) ; 

渲染视图：调用筛选的方法并对每个项目使用render()