2013-09-25 60 views
0

我正在使用knockout-kendo.js庫處理Web應用程序。我的問題是,我有一個綁定kendoComboBox到一個observableArray數據源。組合框不反映對observableArray所做的更改。knockout-kendo combobox數據源在渲染後沒有更新?

這裏是我的綁定組合框:

<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data:  choices, value: selectedChoice, template: '<span>Name: #: data.name # </span>' }" /> 

這裏是我的視圖模型:

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/

注意發生了什麼按鈕時點擊將項目添加到數據源觀察vableArray。組合框不會將新項目顯示爲選項。

我對knockoutkendo頗爲陌生,並且正在尋找解決方法/替代方法來獲取新項目以顯示在組合框中。

由於提前, 奧斯汀

回答

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 /淘汰賽/ 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帶有您期待的結果的版本:

http://jsfiddle.net/nTnwx/

希望這有助於...