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

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

要制作过滤器，您应该在集合中使用过滤功能

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（）

骨干过滤收集和显示

3 个答案: