Knockout JS的 observableArray不会绑定,observable会绑定
我正在尝试从一个选项数组中创建一个下拉选择列表。
我已经初始化了这些变量:
self.locationList = ko.observableArray([]);
self.selected = ko.observableArray([]);
self.firstLocationTitle = ko.observable();
我已经创建了一个Location对象的函数
var Location = function (location, companyId, selected) {
this.Location = location;
this.CompanyId = companyId;
this.isChecked = selected;
};
我接着调用data来填充我的数组
if (data != null) {
self.locationList([]);
for (i = 0; i < data.length; i++) {
self.locationList().push(new Location(data[i].Location, data[i].CompanyId, false));
if (i == 0) {
self.selected([]);
self.selected().push(self.locationList()[i]);
self.firstLocationTitle(data[i].Location);
}
}
}
然后有这段HTML,试图以任何方式查看它们
<div class="panel-body">
<div class="form-inline">
<label>Select Location</label>
<select class="searchfield form-control" data-bind=" options: locationList,
optionsText: 'Location',
@*optionsValue: 'Location',*@
selectedOptions: selected,
optionsCaption: 'Select Location'"></select>
<ul class="list-group" data-bind="foreach: locationList">
<li class="list-group-item adjective-checkbox" data-bind="css: { active: isChecked }, click: $parent.toggleChecked.bind($data)">
<div class="checkbox">
<label>
<input type="checkbox" name="SelectedAdjectives" data-bind="value: Location, checked: isChecked" />
<span data-bind="text: Location"></span>
</label>
</div>
</li>
<li>123</li>
</ul>
</div>
<hr />
<div>
<div data-bind="visible: selected">
Location to Assign:
@*<b data-bind="text: selected() ? selected()[0].Location : 'unknown'"></b>*@
<b data-bind="text: firstLocationTitle"></b>
</div>
</div>
</div>
我最初尝试创建一个先显示的下拉字段。这个没有填充任何数据。随后我尝试用foreach绑定创建一个复选框列表,但在视图中什么也没有渲染。为了验证绑定是否正常,我在末尾放了一个文本绑定来确认可观察对象确实能进入视图,这一点也确实起作用。实际运行中,情况如下:

我也做过其他类似的事情,效果都不错,所以大部分都是照搬现有的可用代码。
我不知道自己到底错在哪儿。
我知道绑定已经生效,因为firstLocationTitle正在显示。
打开控制台时,selected已被填充为一个元素,locationList有两个元素。
没有错误信息。
值得注意的是,如果我尝试把select的 optionsValue设置成直接给firstLocationTitle赋一个字符串,无论如何都会把该值设为null。
与该select相关联似乎只会把任何变量置为null。
解决方案
self.locationList().push()
does not post notifications that the observable array has been updated,
self.locationList.push()
确实会发送通知,解决了我的问题。
站内所有文章版权归属LeftHeroAI导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。