knockout.js 使用具有可观察属性的自定义对象进行敲除绑定选择

cfh9epnr  于 2022-11-10  发布在  其他
关注(0)|答案(2)|浏览(147)

我正在尝试绑定一个<select>和Knockout。在我的ViewModel中,我有两个不同的对象,每个都有可观察的属性。
第一个对象是Property,它有一个headquarter_id作为ko.observable()。第二个对象是Headquarter,它有一个id和一个name,两者都是ko.observable()
我想做的是,用Headquarter对象的ko.observableArray()绑定一个select,如下所示:

<select id="headquarters" data-bind="options: HeadquarterOptions, optionsText: name, optionsValue: id, optionsCaption: '--Select--', value: Property().headquarter_id"></select>

但我不断得到:
未捕获的引用错误:无法处理绑定“选项:function(){返回总部选项}”
消息:未定义ID
下面是我的ViewModel的外观:

var Property = function () {
    var self = this;
    self.headquarter_id = ko.observable();
}

var Headquarter = function (id, name) {
    var self = this;
    self.id = ko.observable(id);
    self.name = ko.observable(name);
}

var headquarterOptions = [
        new Headquarter(1, "hq 1"),
        new Headquarter(2, "hq 2"),
        new Headquarter(3, "hq 3"),
    ]

var PropertiesViewModel = function (app, dataModel) {
    var self = this;
    self.Property = ko.observable(new Property());
    self.HeadquarterOptions = ko.observableArray(headquarterOptions);
}

ko.applyBindings(PropertiesViewModel);

我如何才能做到这一点?
这是我目前的小提琴:http://jsfiddle.net/juandozco/dzwnb05b/

yhxst69z

yhxst69z1#

给你http://jsfiddle.net/dzwnb05b/4/

<select class="form-control" id="headquarter" data-bind="options: HeadquarterOptions, optionsText: 'name', optionsValue: 'id', optionsCaption: '--Select--', value: Property().headquarter_id"></select>

名称和ID前后缺少单引号。

icnyk63a

icnyk63a2#

optionsValueoptionsText应声明为函数,而不是值(http://knockoutjs.com/documentation/options-binding.html):

optionsText: function(item) {return item.name; }
optionsValue: function(item){ return item.id; }

查看更新的小提琴:http://jsfiddle.net/dzwnb05b/3/

相关问题