修憲基於下拉選擇

Question

http://jsfiddle.net/pyCTN/115/

鏈接文本和數組值文本如果您查看上面的小提琴和點擊一個Sort Type鏈接，你可以選擇「分數，數量和平均」和陣列將被相應地進行排序。

不過，我需要進行兩個改進：

相反的Sort Type，下面的下拉列表鏈接文本應顯示所選排序類型，即「分數，計數或平均值」。

<a class="btn dropdown-toggle" data-bind="text: 'Sort Type'" data-toggle="dropdown"></a> 

而不是顯示「得分」時，表中的文本應該從陣列顯示所選排序類型值

<span class="input-group-addon" data-bind="text: Score"></span> 

我使用的是sort自定義綁定，我想知道如果最佳方法是修改它並返回一個包含排序類型的觀察值和一個只包含數組項名稱和選定排序類型的可觀察數組。

另一個考慮因素是sort type'Score'應該被默認返回。目前沒有默認值。

任何指導將不勝感激。

Answer 1

結合結合我改變了bindingHandlers來改變排序類型。

ko.bindingHandlers.sort = { 
init: function (element, valueAccessor, allBindingsAccessor, viewModel, bindingContext) { 
    element.onclick = function (e) { 
     e.preventDefault(); 
     var value = valueAccessor(); 
     var prop = value.prop; 
     var data = value.arr; 
     $(e.target).closest('div').children()[0].text = prop; 
     data.sort(function (left, right) { 
      return left[prop] == right[prop] ? 0 : left[prop] > right[prop] ? -1 : 1; 
     }); 
    }; 
} 
}; 

HTML

<div class="input-group-addon"> <a class="btn dropdown-toggle" data-toggle="dropdown">Sort Type</a> 

http://jsfiddle.net/pyCTN/118/

Answer 2

基於你的樣品快速劈...

添加可觀察到保持當前排序類型

self.sorttype = ko.observableArray(['Score', 'Count', 'Average']); 
self.selectedSort = ko.observable('Score'); 

改變綁定設置selectedSort在onclick

var value = valueAccessor(); 
var prop = value.prop; 
var data = value.arr; 

// set the current sort type 
// this binding in inside a foreach, so you need to get the parent model 
bindingContext.$parents[1].selectedSort(prop); 

更改跨度數據綁定。您在小提琴（2.1）中使用的敲除版本有一個錯誤，其中以下語法生成綁定異常。升級到2.3或3.0可以修復它。如果你不能改變淘汰賽版本，那麼你就需要使用ko.computed

<span class="input-group-addon" data-bind="text: $data[$parents[1].selectedSort()]"></span> 

---

編輯

感謝您指出與過去的那種獨立的明顯的監督;）

移動selectedSort到集合對象

collection.FaveListItems = data; 
collection.Count = data.length; 
collection.selectedSort = ko.observable('Score'); 

改變bindingHander從$家長[1]到$父

bindingContext.$parent.selectedSort(prop); 

改變文本的下拉

<a class="btn dropdown-toggle" data-bind="text: selectedSort" data-toggle="dropdown"></a> 

更改文本對行跨度

<span class="input-group-addon" data-bind="text: $data[$parent.selectedSort()]"></span>