正確的方式來對飛

Question

排序Backbone.js的集合，我可以成功地做到這一點。但我需要動態地完成這個排序。有時，我需要按照「firstName」來排序。

我徹底的失敗者包括：

我想傳遞一個額外的變量指定變量sort()上。這沒有用。我也試過sortBy()，這也沒有工作。我嘗試將自己的函數傳遞給sort（），但是這也不起作用。將用戶定義的函數傳遞給sortBy()只是爲了讓結果沒有each方法，從而破壞了新分類的骨幹網集合點。

有人可以提供一個實際的例子排序通過一個變量，而不是硬編碼到比較函數？或者你有任何破解工作？如果沒有，請撥打sortBy()電話？

Answer 1

有趣的問題。我會在這裏嘗試一個關於戰略模式的變體。您可以創建排序功能的哈希值，然後基於散列的選定成員上設置comparator：

App.SomeCollection = Backbone.Collection.extend({ 
    comparator: strategies[selectedStrategy], 
    strategies: { 
     firstName: function() { /* first name sorting implementation here */ }, 
     lastName: function() { /* last name sorting implementation here */ }, 
    }, 
    selectedStrategy: "firstName" 
}); 

然後，你可以通過更新selectedStrategy屬性的值更改動態的排序策略。

編輯：我意識到我睡覺後:)這不會像我上面寫的那樣工作，因爲我們將對象字面值傳遞給Collection.extend。在創建對象時，comparator屬性將被評估一次，因此除非被迫這樣做，否則它不會隨時更改。有可能是一個更清潔的方式做到這一點，但是這證明了在飛行中切換比較功能：

var SomeCollection = Backbone.Collection.extend({ 
    comparator: function (property) { 
     return selectedStrategy.apply(myModel.get(property)); 
    }, 
    strategies: { 
     firstName: function (person) { return person.get("firstName"); }, 
     lastName: function (person) { return person.get("lastName"); }, 
    }, 
    changeSort: function (sortProperty) { 
     this.comparator = this.strategies[sortProperty]; 
    }, 
    initialize: function() { 
     this.changeSort("lastName"); 
     console.log(this.comparator); 
     this.changeSort("firstName"); 
     console.log(this.comparator);   
    }                       
}); 

var myCollection = new SomeCollection; 

這裏有一個jsFiddle演示這一點。

我認爲，所有問題的根源在於創建對象時立即評估JavaScript對象文字的屬性，因此如果要更改它，必須覆蓋該屬性。如果您嘗試寫入某種切換到屬性本身，它將被設置爲初始值並保持在那裏。

下面是一個很好的blog post，在略有不同的上下文中討論這個問題。

Answer 2

所以，這是我的解決方案，實際工作。

App.Collection = Backbone.Collection.extend({ 

    model:App.Model, 

    initialize: function(){ 
     this.sortVar = 'firstName'; 
    }, 

    comparator: function(collection){ 
     var that = this; 
     return(collection.get(that.sortVar)); 
    } 

    }); 

然後在視圖中，我有米老鼠這樣的：

this.collections.sortVar = 'lastVar' 

this.collections.sort(this.comparator).each(function(){ 
    // All the stuff I want to do with the sorted collection... 
}); 

由於喬希·厄爾是連嘗試的解決方案是唯一一個和他領我在正確的方向，我接受他的回答。謝謝喬希:)

Answer 3

通過分配一個新的函數和調用排序來改變比較函數。

// Following example above do in the view: 

// Assign new comparator 
this.collection.comparator = function(model) { 
    return model.get('lastname'); 
} 

// Resort collection 
this.collection.sort(); 

// Sort differently 
this.collection.comparator = function(model) { 
    return model.get('age'); 
} 
this.collection.sort(); 

Answer 4

這是一個老問題，但我最近也有類似的需要（排序由用戶點擊事件中提供基於標準的集合），我想我會分享我爲別人解決這個問題的解決方案。不需要硬編碼的model.get（'attribute'）。

我基本上是用戴夫牛頓approach延長本地JavaScript陣列，並針對骨幹：

MyCollection = Backbone.Collection.extend({ 

    // Custom sorting function. 
    sortCollection : function(criteria) { 

     // Set your comparator function, pass the criteria. 
     this.comparator = this.criteriaComparator(criteria); 
     this.sort(); 
    }, 

    criteriaComparator : function(criteria, overloadParam) { 

     return function(a, b) { 
      var aSortVal = a.get(criteria); 
      var bSortVal = b.get(criteria); 

      // Whatever your sorting criteria. 
      if (aSortVal < bSortVal) { 
       return -1; 
      } 

      if (aSortVal > bSortVal) { 
       return 1; 
      } 

      else { 
       return 0; 
      } 

     }; 
    } 

}); 

注意「overloadParam」。根據documentation，Backbone使用Underscore的「sortBy」（如果您的比較器函數具有單個參數），如果它具有兩個參數，則使用原生JS風格的排序。我們需要後者，因此是「overloadParam」。

Answer 5

這就是我最終爲我正在開發的應用程序所做的事情。在我的收藏，我有：

comparator: function(model) { 
    var methodName = applicationStateModel.get("comparatorMethod"), 
     method = this[methodName]; 
    if (typeof(method === "function")) { 
     return method.call(null, model); 
    } 
} 

現在，我可以添加一些不同的方法來我的收藏：fooSort（），barSort（），和bazSort（）。
我想foo​​Sort是默認的，所以我設置在我的狀態模型，如下所示：

var ApplicationState = Backbone.Model.extend({ 
    defaults: {    
     comparatorMethod: "fooSort" 
    } 
}); 

現在我所要做的就是寫在我看來，一個函數依賴於一個更新「comparatorMethod」的價值用戶點擊了什麼。我將集合設置爲偵聽這些更改並執行sort（），並將視圖設置爲偵聽排序事件並執行render（）。

BAZINGA !!!!

Answer 6

看着source code，似乎有一個簡單的方法來做到這一點，將比較器設置爲字符串而不是函數。這工作，給定Backbone.Collection mycollection：

 mycollection.comparator = key; 
     mycollection.sort();