Knockout可观察的更新但不更新UI?
问题描述:
我已经在测试函数中更新了observable item属性。 此更新已成功更新可观察项目。Knockout可观察的更新但不更新UI?
因为我在调试中检查它。
但标签不更新。 有什么不对?
i try item.serviceResult = ko.observable(“TESTING ...”); 和其他东西,但用户界面标签不更新。
的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>
答
尝试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
我希望这说明了一点。
这是真的,我忘记了这一点。 – wikiCan 2014-09-04 09:51:24