Knockout JS的 observableArray不会绑定,observable会绑定

前端开发 2026-07-11

我正在尝试从一个选项数组中创建一个下拉选择列表。

我已经初始化了这些变量:

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导航站,无授权禁止任何主体转载、抄袭、复制内容,亦不得私自架设镜像站点。一经侵权,本站将通过法律途径追责。

相关文章