нокаут-kendo combobox datasource не обновляется после его рендеринга?

Question

Я работаю над веб-приложением, используя библиотеки knockout-kendo.js. Моя проблема в том, что после того, как у меня есть связанный kendoComboBox с источником данных 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/

Обратите внимание, что происходит, когда кнопка щелчок, чтобы добавить элемент к наблюдаемому источнику данных Массив. В поле со списком не отображается новый элемент в качестве опции.

Я довольно новичок в knockoutkendo и ищу обходной путь/альтернативный способ получить новые элементы, которые появятся в combobox.

Спасибо заранее, Остин

Answer 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 с версией, которая производит результат, который вы ожидаете:

http://jsfiddle.net/nTnwx/

Надеюсь, что это поможет ...