骨干分拣程序。 UI与数据

Question

我的问题是关于使用主干显示记录列表的正确方法。比方说，你有一个人的模型，你想显示给用户，并允许他们排序的名字，姓氏，身份证....

第一本能是只有视图捕捉事件和重新-render基于用户排序选项。这种方法的问题在于它是U.I.而不是数据驱动。

第二个想法是在模型中设置排序属性，因为集合不包含属性（尽管这似乎是最好的选择）。这种方法至少是通过设置排序属性来驱动数据的，但这是非常多余的，如果排序属性在保存时没有被去除，则它们被发送到服务器|本地或...

最后的想法可能是正确的。创建第二个模型，该模型将成为包含排序/显示属性的控件模型。我用这种方法的问题是事件和模型可能变得非常不守规矩。如果你扩展的不只是一个人的模型，并使其成为一个相当大的应用程序，你有很多的模型和事件，并难以管理。模型1视图必须捕获初始事件，然后让集合触发自定义事件，然后第二个模型必须捕获自定义事件并进行渲染。

对不起，对于很长的职位，我对骨干js来说是相当新的，并且希望确保我有最好的实践把握。先谢谢您的帮助。我希望我至少在正确的轨道上。

Answer 1

昨晚我刚刚实施了这个。

您可以设置一个新的集合comparator然后使用sort方法的集合。 sort将触发一个reset事件，您可以在视图中使用该事件来重新呈现列表。

这是我的看法，其中包含一个选择框，允许用户选择如何对数据进行排序：

App.HouseListView = Backbone.View.extend({ 
    el: '.house-list', 
    initialize: function() { 
     App.houseCollection.bind('reset', this.populateList, this); 

    }, 
    events: { 
     'change .sort':'sort', 
    }, 
    populateList: function(collection) { 
     this.$('ul').html(''); 
     _.each(collection.models, function(model) { 
      var view = new App.HouseListElemView({model:model}); 
      this.$('ul').append(view.el); 
     }); 
    }, 
    sort: function(e) { 
     var sort_by = $(e.srcElement.selectedOptions[0]).attr('data-sort-by'); 
     App.houseCollection.comparator = function(house) { 
      return house.get(sort_by); 
     } 
     App.houseCollection.sort(); 
    }, 
}); 

希望这有助于

编辑：实现@mu is too short的建议：

App.Houses = Backbone.Collection.extend({ 
    model: App.House, 
    url: API_URL, 
    _sort_by: 'price', 
    sort_houses_by: function(sort_by) { 
     this._sort_by = sort_by; 
     this.sort(); 
    }, 
    comparator: function(house) { 
     return house.get(this._sort_by); 
    }, 
}); 


App.houseCollection = new App.Houses(); 

App.HouseListView = Backbone.View.extend({ 
    el: '.house-list', 
    initialize: function() { 
     App.houseCollection.bind('reset', this.populateList, this); 

    }, 
    events: { 
     'change .sort':'sort', 
    }, 
    populateList: function(collection) { 
     this.$('ul').html(''); 
     _.each(collection.models, function(model) { 
      var view = new App.HouseListElemView({model:model}); 
      this.$('ul').append(view.el); 
     }); 
    }, 
    sort: function(e) { 
     var sort_by = $(e.srcElement.selectedOptions[0]).data('sort-by'); 
     App.houseCollection.sort_houses_by(sort_by); 
    }, 
});