Question

我有一个带有下拉列表和检查框的表单的UI，以便过滤从服务器返回的结果。

我想知道是否必须创建一个模型以保持当前设置可用，或者只是使用jquery获取val并将它们传递给Collections fetch。

什么会更好？

Answer 1

这取决于您希望投入多少设计，或者您只是采用更实用的方法。

如果您运行设计解决方案，我们可以说我们在这里播放的结果没有Collection。它是FilterSearch模型，每次我们向服务器发送过滤器参数时，我们正在做的是创建 FilterSearch的实例。让我们说：

POST http://myapp.com/filter_searchs?field1=value1&field2=value2

服务器将接受此请求并返回结果数组。让我们说：

{
  "field1": "value1",
  "field2": "value2",
  "results": [ "result1", "result2" ]
}

Backbone FilterSearch模型将更新，服务器会回复该信息：

var myFilterSearch = App.FilterSearch.new({ field1: "value1", field2: "value2" });
myFilterSearch.save({ wait:true });

从那里我们可以创建结果Collection：

var myResults = App.Results.new( myFilterSearch.get( "results" ) );

（所有代码都经过简化，未经过测试）

Answer 2

另一个解决方案是将过滤器字段存储到自己的Collection中。

App.Results = Backbone.Collection.extend({
  url: function() {
    return "/results?field1=" + this.field1 + "&field2=" + this.field2 );
  }
});

var myResults = App.Results.new({ field1: "value1", field2: "value2" });
myResults.fetch();

这种方法很有意思，因为您只需修改集合中的过滤器字段即可更新结果并调用.fetch()，所有对集合的引用都将保留。

（所有代码都经过简化，未经过测试）

Answer 3

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

要制作过滤器，您应该具有过滤功能

var yourCollection = Backbone.Collection.extend ({
    filtered : function () {

我建议使用UnderScore过滤器，该过滤器将返回true表示有效，false表示无效，其中true表示您正在查找的内容。使用this.models获取当前集合模型使用model.get（''）来获取要检查的元素例如，您可能有一个显示特定类别的复选框

var results = _.filter( this.models, function ( model ) {
    if ( item.get('category') === 'y' ) 
         return true ; 
    return false ;
});

您可以使用所有下拉列表和复选框继续过滤结果然后使用下划线映射您的结果并将其转换为JSON，如

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

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

return new Backbone.Collection( results ) ;

可选择如果您不想保留集合中的所有数据而只是保留过滤后的数据，您可以重置集合并跳过上面的返回

this.reset( results ) ;

查看：此处您的ui数据请求您在使用jquery

传递ui值后调用过滤后的函数

Backbone JS过滤器形式

3 个答案: