骨幹分揀程序。 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); 
    }, 
});