根据下拉选择修改链接文本和数组值文本 [英] Amending link text and array value text based on dropdown selection

问题描述

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自定义绑定，我想知道最好的方法是否是对其进行修改，并返回包含排序类型的observable和仅包含数组项名称和所选排序类型的observable数组. /p>

另一个要考虑的问题是，默认情况下应返回sort type'Score'.当前，没有默认值.

任何指导将不胜感激.

解决方案

我已经更改了用于更改排序类型的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/

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

If you view the above fiddle and click on a Sort Type link, you can choose between 'Score, Count and Average' and the array will be sorted accordingly.

However, I need to make two enhancements:

Instead of Sort Type, the dropdown link text below should show the selected sort type i.e. 'Score, Count or Average'.

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

Instead of showing 'Score', the table text should show the selected sort type value from the array

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

I'm using a sort custom binding and I'm wondering if the best approach is to amend that and return an observable containing the sort type and an observable array containing only the array item name and selected sort type.

Another consideration is that sort type 'Score' should be returned by default. Currently, there is no default.

Any guidance would be much appreciated.

解决方案

i have changed bindingHandlers for changing sort type.

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/

这篇关于根据下拉选择修改链接文本和数组值文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！