Question

如果您查看上述小提琴并单击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自定义绑定，我想知道最好的方法是修改它并返回包含排序类型的observable和只包含数组项名称和所选排序类型的可观察数组

另一个考虑因素是默认情况下应返回sort type'得分'。目前，没有默认值。

非常感谢任何指导。

Answer 1

基于您的样本的快速黑客......

添加一个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>

Answer 2

我已更改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/

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

2 个答案: