Question

I am loading data from a web API like this:

$.getJSON("/api/Rule", function (rules) {
    self.Rules(rules);
});

Then I bind Rules to a table using a foreach binding. Each Rule has the properties: Keyword, Attribute, and Value.

I want to check if Keyword is a certain value which controls the visibility of some controls.

data-bind="options: viewModel.Attributes, visible : Keyword != 'Else'"

The problem is the visibility is not updating when I change the value of Keyword to a different value.

How do I get this to work?

If it is supposed to be through some kind of binding, I did not declare a special object in my view model and I am just using whatever was returned from the server.

Answer 1

Frankly, you must map your objects to observables. That’s how knockout is able to do its magic. Using the mapping plugin will make this trivial.

$.getJSON("/api/Rule", function (rules) {
    var mappedRules = ko.mapping.fromJS(rules);
    self.Rules(mappedRules);
});

Otherwise you can map it yourself.

$.getJSON("/api/Rule", function (rules) {
    var mappedRules = ko.utils.arrayMap(rules, function (rule) {
        return {
            Keyword: ko.observable(rule.Keyword),
            Attribute: ko.observable(rule.Attribute),
            Value: ko.observable(rule.Value)
        };
    });
    self.Rules(mappedRules);
});

Just remember that you are now dealing with observables now so you need to adjust your bindings.

data-bind="options: viewModel.Attributes, visible : Keyword() != 'Else'"