Источник данных со списком нокаут-кендо не обновляется после рендеринга?

Я работаю над веб-приложением, используя библиотеки Knockout-kendo.js. Моя проблема в том, что после того, как у меня есть связанный kendoComboBox с источником данных observableArray. Поле со списком не отражает изменения, внесенные в observableArray.

Вот мой связанный список со списком:

<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/

Обратите внимание, что происходит, когда нажимается кнопка для добавления элемента в observableArray источника данных. Поле со списком не отображает новый элемент в качестве опции.

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

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


jquery knockout.js kendo-combobox knockout-kendo
person Austin Pantall    schedule 25.09.2013    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Не уверен, что это все еще проблема для вас, но я наткнулся на этот вопрос, когда искал другую проблему для себя. Это решение также предполагает использование 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/

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

person Neil Hibbert    schedule 15.10.2013