Durandal 2.0 - Update the value of an observable in the view

Question

I'm new to Durandal, my question has probably a very simple issue.

I load a list into a dropdown and the current value on the link which display the dropdown,

And the value of the link which display the dropdown is not updated correctly when an other value is selected.

But actually, I can't set the value of the observable in the select function.

View Model

var self = this;
self.system = require('durandal/system');

IPsKeys: ko.observableArray([]),
ipKeys: ko.observable(""),

activate: function (context) {
        var that = this;
        that.IPsKeys([]);
        that.ipKeys("");

        return $.when(
            service.getIPSbyClientId(context.clientId).then(function (json) {
                $.each(json, function (Index, Value) {

                    var ClientLobUWYear = {
                        NameLob: Value.LineOfBusiness.Name,
                        NameUWYear: Value.UnderwritingYear
                    };

                    that.IPsKeys().push(ClientLobUWYear);

                    // HERE MY VALUE IS GOOD UPDATING AND THE BINDING WORK
                    if (Index=== 0) {
                        that.ipKeys(ClientLobUWYear);
                    }
                });
            })
        ).then(function () {
            //do some other datacontext calls for stuff used directly and only in view1
        });
},

select: function (item) {
        this.ipKeys = {
            IdClient: item.IdClient,
            IdLob: item.IdLob,
            NameLob: item.NameLob,
            NameUWYear: item.NameUWYear
        };

        /** PROBLEMS HERE **/
        /** Uncaught TypeError: undefined is not a function **/
        this.ipKeys(ClientLobUWYear);
},

View

<a id="select_lob-UWYear" class="dropdown-toggle" data-toggle="dropdown" href="#">
     <span class="controls_value" data-bind="text: ipKeys().NameLob">ALOB</span>
     <span class="controls_value" data-bind="text: ipKeys().NameUWYear">AYEAR</span>
</a>
<ul id="dropdown_year" class="dropdown-menu" data-bind="foreach: IPsKeys().sort(sortByLobYear)">
    <li>
        <a href="#" data-bind="click: $parent.select">
            <span class="controls_value" data-bind="text: NameLob">Cargo</span>
            <span class="controls_value" data-bind="text: NameUWYear">2014</span>
        </a>
    </li>
</ul>

Thanks a lot

4imble · Accepted Answer · 2014-05-01T12:12:57.713

The way you update an observable is like this:

var someObservable = ko.observable(""); //setting to "";
someObservable("Something else"); //updating to "Something else"

Not like this (which you are doing above)

var someObservable = ko.observable(""); //setting to "";
someObservable = "Something else";

This is overwriting someObservable with a string of value "Something else" and so is no longer an observable which is why it will not update the ui.

[JS Fiddle showing how to set observables.]

Durandal 2.0 - Update the value of an observable in the view

1 Answers1