Observable array and changing the css class in KnockoutJS

Question

I have a very simple issues, but being new to knockout I'm struggling.

I want to have a few clickable buttons that change css class and send and ajax query when pressed (they can be toggled or not, basically)

Here's my knockout view:

function addStuffViewModel() {
    // Data
    var self = this;
    self.movement = ko.observableArray([
        { name: 'Car', isChecked: false },
        { name: 'Bus', isChecked: false },
        { name: 'Bike', isChecked: false },
         ]);

    toggleButton = function(data,event) {
            data.isChecked = true;
            alert(data.isChecked)
    }    
};

ko.applyBindings(new addStuffViewModel());

And here is the call:

<table style="text-align:center;margin:auto">
    <tr data-bind="foreach: movement">
        <td>
            <a class="btn" style="width:100%;margin:2px" data-bind="text: $data.name,
                                   css: { 'btn-success': $data.isChecked },
                                   click: function(data, event) { toggleButton(data, event) }" /></a>
        </td>
    </tr>
</table>

This alerts the fact that the isChecked has changed, but the observableArray does not register the change. I feel like I want it to be a bit more "magical" than it actually is.

I'm sure it's a grotesque mistake and people will laugh, but any help would be appreciated

Andrew Whitaker · Accepted Answer · 2013-04-26 02:43:21Z

3

The properties inside each object in your observable array that you want to "listen" to need to be observable as well. Typically the way to do this would be to create another ViewModel that describes those objects:

function Item(name, isChecked) {
    this.name = ko.observable(name);
    this.isChecked = ko.observable(isChecked);
}

Then update your observable array:

self.movement = ko.observableArray([
    new Item('Car', false),
    new Item('Bus', false),
    new Item('Bike', false)]);

Example: http://jsfiddle.net/CCNtR/25/

You could tighten up your code further by defining the toggleButton function on item:

function Item(name, isChecked) {
    var self = this;

    this.name = ko.observable(name);
    this.isChecked = ko.observable(isChecked);
    this.toggleButton = function () {
        self.isChecked(true);
    };
}

... and then update your view:

<a class="btn" style="width:100%;margin:2px" 
    data-bind="text: name,
    css: { 'btn-success': isChecked },
    click: toggleButton" /></a>

Example: http://jsfiddle.net/CCNtR/26/

answered Apr 26, 2013 at 2:43

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

1 Comment

Alb Dum Over a year ago

As I said, newbie mistake. Thanks ! I've been pulling my hair a little bit on this.. :)

Collectives™ on Stack Overflow

Observable array and changing the css class in KnockoutJS

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related