Amending link text and array value text based on dropdown selection

Question

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.

Akhlesh · Accepted Answer · 2014-02-25 05:27:14Z

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/

answered Feb 25, 2014 at 5:27

Akhlesh

2,3991 gold badge16 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Robert Slaney · Accepted Answer · 2014-02-25 22:30:01Z

1

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>

edited Feb 25, 2014 at 22:30

answered Feb 25, 2014 at 3:45

Robert Slaney

3,7321 gold badge23 silver badges26 bronze badges

1 Comment

user1405195 Over a year ago

Thanks very much. I've updated the fiddle: jsfiddle.net/pyCTN/117 Just a couple of things, your solution updates all arrays in the collection and not just the one selected.

Collectives™ on Stack Overflow

Amending link text and array value text based on dropdown selection

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related