Question

我在测试功能中更新了observable item属性。此更新成功更新了可观察项。

因为我在调试中检查它。

但标签不是更新。有什么问题？

我尝试item.serviceResult = ko.observable（“TESTING ...”）; 和其他东西，但ui标签不更新。

Javascript代码：

   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

尝试item.serviceResult("Testing");。

如果您只是为可观察的变量分配新值，则不会发生任何事情：

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

代替：

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

我希望这能解释一下。

敲除可观察的更新但不更新UI？

1 个答案: