Knockout observable update but not update UI?

Question

I have update observable item property in test function. this update is successfully update observable item.

Because i check it in debug.

But label isn't update. What is wrong?

i try item.serviceResult = ko.observable("TESTING..."); and other things but ui label doesnt update.

Javascript codes:

   var ViewModel = function (myPano) {
        var observablePano = ko.utils.arrayMap(myPano, function (panoData) {
        return {
            panoNo: ko.observable(panoData.panoNo),
            modemNo: ko.observable(panoData.modemNo),
            aydinlatmaNo: ko.observable(panoData.aydinlatmaNo),
            geneltuketimNo: ko.observable(panoData.geneltuketimNo),
            serviceResult: ko.observable(panoData.serviceResult),
            test: function (item) {
                alert(item.panoNo());
                item.serviceResult = "TESTING...";
            }
        };
    });
    this.Panos = ko.observableArray(observablePano);
};

$(function () {

    var viewModel = new ViewModel(
        [
        { panoNo: '1', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' },
        { panoNo: '2', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' },
        { panoNo: '3', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' },
        { panoNo: '4', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' },
        { panoNo: '5', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' },
        { panoNo: '6', modemNo: '', aydinlatmaNo: '', geneltuketimNo: '', serviceResult: '.' }
        ]
        );

    ko.applyBindings(viewModel);

});

 html : <div class="row show-grid" data-bind="foreach: Panos">

    <div class="col-xs-6 col-md-4">

        <table>
            <tr>
                <td>
                    <form class="form-horizontal">
                        <fieldset>

                            <div class="input-group">
                                <input type="text" placeholder="PANO NO" class="form-control" data-bind="value: panoNo">
                            </div><div class="input-group">
                                <input type="text" placeholder="MODEM NO" class="form-control" data-bind="value: modemNo">
                            </div><div class="input-group">
                                <input type="text" placeholder="AYDINLATMA SAYAÇ NO" class="form-control" data-bind="value: aydinlatmaNo">
                            </div><div class="input-group">
                                <input type="text" placeholder="GENEL TÜKETİM SAYAÇ NO" class="form-control" data-bind="value: geneltuketimNo">
                            </div>

                        </fieldset>

                    </form>
                </td>
                <td>
                    <button type="button" class="btn btn-primary" data-bind="click: test">Testi Başlat</button>
                    <br />
                    <span class="label label-default" data-bind="text: serviceResult"></span>                        
                </td>
            </tr>
        </table>


    </div>

</div>

Answer 1

Try item.serviceResult("Testing");.

If you simply assign a new value to a variable that is an observable, nothing will happen:

item.serviceResult = ko.observable("1");

//apply bindings, Label will Display 1

item.serviceResult = ko.observable("2");

//Label is still bound to the observable that contains "1", you'd have to reassign bindings to find that it should now bind to some other observable

instead:

item.serviceResult("2"); 
//assign new value into the existing observable! this will update the UI as the ui is bound to this observable object

I hope this explains it a little.