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

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"分数"。目前，没有默认值。

任何指导将不胜感激。

Answer 1

我已经更改了用于更改排序类型的绑定处理程序。

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');

更改绑定以在单击中设置选定的排序

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） 中使用的 Knockout 版本有一个错误，其中以下语法生成绑定异常。 升级到 2.3 或 3.0 可以修复它。 如果您无法更改淘汰版本，则需要使用 ko.computed

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

---

编辑

感谢您指出最后一种独立性;)的明显疏忽

将选定的排序移动到集合对象

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

将绑定手从 $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>