Error while binding the selected value with DevExtreme and KnockOut

Question

I trying to develop a little app.

I have made a login view and it works, I am able to bind the data written by the user. After this, I show two select box. The first is binded with a list (correctly) and the second has to be bind with a list populated after a value is selected from the first.

I'm not able to read the value selected from the first list.

I have this html:

<div class="dx-fieldset">
            <div class="dx-field">
                <div class="dx-field-label">Rete</div>
                <div class="dx-field-value"
                     data-bind="dxLookup: { dataSource: is_retistiSource, value: rete, displayExpr: 'NOME', title: 'Retisti associati', placeholder: 'Selezionare rete',
                                            onSelectionChanged:setRete }" />
            </div>

            <div class="dx-field">
                <div class="dx-field-label">Impianto</div>
                <div class="dx-field-value" 
                     data-bind="dxLookup: { dataSource: is_impiantiSource, value: impianto, displayExpr: 'NOME', title: 'Impianti associati', placeholder: 'Selezionare impianto' }" />
            </div>
        </div>

and this javascript:

OverviewAPP.afterLogin = function (params) {
    var isReady = $.Deferred();
    var viewModel = {
        rete: ko.observable(""),
        impianto: ko.observable(""),
        is_retistiSource: OverviewAPP.listaReti,
        is_impiantiSource: OverviewAPP.listaImpianti,
        setRete: function () {
            console.log(viewModel.rete);
            var nRetisti = OverviewAPP.listaRetiImpianti.length;
            for (i = 0; i < nRetisti; i++) {
                if (OverviewAPP.listaRetiImpianti[i]["retista"]["NOME"] == this.rete)
                {
                    OverviewAPP.listaImpianti = listaRetiImpianti[i]["listaImpianti"];
                    break;
                }
            }
            is_impiantiSource = OverviewAPP.listaImpianti;
        },
        close: function () {
            OverviewAPP.app.back();
        }
    };
    return viewModel;
};

In the setRete function, with the line "console.log(viewModel.rete);", I see this output:

d(){if(0<arguments.length)return d.Wa(c,arguments[0])&&(d.X(),c=arguments[0],d.W()),this;a.k.Ob(d);return c}

Why? How can I bind and read the selected value?

UPDATE: I've done in this way, it works:

setRete: function (e) {
            OverviewAPP.IDrete = e.value;
            var nRetisti = OverviewAPP.listaRetiImpianti.length;
            for (i = 0; i < nRetisti; i++) {
                if (OverviewAPP.listaRetiImpianti[i]["retista"]["NOME"] == e.value["NOME"])
                {
                   OverviewAPP.listaImpianti = OverviewAPP.listaRetiImpianti[i]["listaImpianti"];
                    break;
                }
            }
            //ko.applyBindings(viewModel);
        },

But I don't know how update my second list, "is_impiantiSource".

Answer 1

Observables are functions. That's why you get a function in the console. Call the rete function to get its value:

viewmodel.rete();

Also see the Knockout: Observables help topic that describes this (under "Reading and writing observables").

This is how you can obtain a new value. Then, you need to update the dependent lookup data source. For this, make the is_impiantiSource property an observable array:

is_impiantiSource: ko.observableArray(OverviewAPP.listaImpianti),

After this, modify it in setRene like:

viewModel.is_impiantiSource(OverviewAPP.listaImpianti)

Also see Observable Arrays for how to work with arrays in Knockout