Amending link text and array value text based on dropdown selection

问题

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.

回答1:

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/

回答2:

A quick hack based on your sample...

Add an observable to hold the current sort type

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

Alter the binding to set the selectedSort in the 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);

Change the span data-bind. The version of knockout you are using in your fiddle (2.1) has a bug where the following syntax generates a binding exception. Upgrading to 2.3 or 3.0 fixes it. If you can't change knockout version then you will need to use a ko.computed

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

EDIT

Thanks for pointing out the glaring oversight with the last of sort independence ;)

Move the selectedSort to the collection object

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

Alter the bindingHander from $parents[1] to $parent

bindingContext.$parent.selectedSort(prop);

Change the text binding on the dropdown

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

Change the text binding on the row span

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

来源：https://stackoverflow.com/questions/22003718/amending-link-text-and-array-value-text-based-on-dropdown-selection

标签

knockout.js