我有以下代码:
模型.js
class MyModel {
constructor(value, title) {
this.value = ko.observable(value);
this.title = ko.observable(title);
}
}
class MyWrapper {
constructor(selected_model) {
this.selected_model = ko.observable(selected_model);
}
}
查看模型.js
class MyVM {
constructor() {
let items = [
new MyModel(1, 'One'),
new MyModel(2, 'Two'),
new MyModel(3, 'Three')
];
this.object_to_work_with = ko.observable(new MyWrapper(items[1]));
this.my_list = ko.observableArray(items);
}
}
html模板
<div data-bind="with: object_to_work_with">
<select id="my_list" data-bind="options: $root.my_list,
optionsValue: 'value',
optionsText: 'title'
value: selected_model().value"></select>
</div>
现在问题来了。一开始我认为值应该直接为selected_model
:
<div data-bind="with: object_to_work_with">
<select id="my_list" data-bind="options: $root.my_list,
optionsValue: 'value',
optionsText: 'title'
value: selected_model"></select>
</div>
但这不起作用,它会导致错误,如“undefined has no property 'value'”。所以我尝试了value: selected_model()
,现在它起作用了,并选择了正确的值,但作为literal -〉,如果我更改它,object_to_work_with.selected_model()
不会更改。最后一次尝试是value: selected_model().value
,它似乎起作用了,但现在当我选择另一个值时,它不会更改object_to_work_with.selected_model()
,它只改变选定模型的值,我是说这个object_to_work_with.selected_model().value() => <the value I've selected>
,但是object_to_work_with.selected_model().title() => 'Two'
永远不会改变。
我在寻找一个解决方案很长时间了,我不知道如何解决它。根据manual,它看起来应该是value: selected_model
,但它导致了异常,我不知道我做错了什么。
有什么想法吗?
编辑:而且最后一个选项value: selected_model().value
正在改变my_list
中的项的值,因为它当然只是一个参考。
编辑2:这里我已经创建了一个工作演示-https://jsfiddle.net/L7tsy4ae/。
1条答案
按热度按时间qvk1mo1f1#
如果您决定使用
optionsValue: 'value'
绑定,您还必须使用items[1]**.value**
初始化selected_model
。相反,我会选择根本不使用optionsValue
绑定,这样您的选择就可以指向实际的视图模型。下面是一个工作示例(还有一些其他的更改不是严格需要的:删除了
object_to_work_with
的可观察 Package ,并将change
事件绑定替换为视图模型中的subscribe
。)第一个