我正在使用knockout-kendo.js库处理一个Web应用程序。我的问题是,我有一个绑定kendoComboBox到observableArray数据源。组合框不反映对observableArray所做的更改。
这是我绑定的组合框:
<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />
这是我的viewmodel:
var ViewModel = function() {
this.choices = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
this.AddChoice = function () {
choices().push(new { id: "4", name: "frank" });
}
this.selectedChoice = ko.observable();};
ko.applyBindings(new ViewModel());
请参阅以下jsfiddle:
http://jsfiddle.net/austinpantall/chNW8/
注意单击按钮将项添加到数据源observableArray时会发生什么。组合框不会显示新项目作为选项。
我对knockoutkendo很新,我正在寻找一种解决方法/替代方法来让新项目出现在组合框中。
提前致谢, 奥斯汀
答案 0 :(得分:1)
不确定这对你来说是否仍然是一个问题,但我偶然发现了问题,同时为自己寻找另一个问题。该解决方案也假设使用jQuery,但我认为这正是您所寻找的:
HTML:
<div id="wrapper">
<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>
<input type="button" data-bind="click: AddChoice" value="Add Choice" />
</div>
JS / Knockout / jQuery:
var ViewModel = function() {
this.choices = ko.observableArray([
{ id: "1", name: "apple"},
{ id: "2", name: "orange"},
{ id: "3", name: "banana"}
]);
this.AddChoice = function () {
choices.push({ id: "4", name: "frank" });
}
this.selectedChoice = ko.observable();
};
ko.applyBindings($('#wrapper'), ViewModel());
我已经调整了你的jsFiddle版本,产生了你期望的结果:
希望这会有所帮助......