根据下拉选择修改链接文本和数组值文本

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

基于您的示例的快速破解...

添加一个 observable 来保存当前的排序类型

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

更改绑定以在 onclick 中设置 selectedSort

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 从 $parents[1] 更改为 $parent

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>