Что вызывает обновление шаблона knockout.js? - PullRequest
Новая
       17

Что вызывает обновление шаблона knockout.js?

1 голос
/ 23 сентября 2011

Я использую knockout (потрясающая библиотека), но столкнулся с проблемой с шаблонами: DOM изменяется только для некоторых моих наблюдаемых объектов, но не для других. Поведение довольно странное - мне интересно, что вызывает обновление DOM для шаблонного объекта в нокауте.

Подробности: я создаю простой редактор опросов. Моя модель представляет собой наблюдаемый массив вопросов, который отображается с помощью шаблона jquery tmpl. Пользователи могут редактировать модель опроса, используя входные данные, привязанные к странице.

Вот (урезанная версия) модель: 

var surveyModel = {
  questions: ko.observableArray([
    {header_text:ko.observable("What is the first answer?"), answer_array:ko.observableArray(["Yes","Maybe","No"])},
    {header_text:ko.observable("What is the second answer?"), answer_array:ko.observableArray(["Yes","No"])}
  ])
};

Сам шаблон: 

<div class="questionBox">
    <div class="headerText">{{html header_text}}</div>
    {{each(i,v) answer_array}}
      <div class="answerText"><input type="radio" value="${i+1}">{{html v}}</input></div>
    {{/each}}

Привязка шаблона: 

<div id="codebookMain" 
     data-bind="template: {name:'questionTemplate', 
                           foreach:questions, 
                           afterRender:addCodebookStyles}">
</div>

Привязка для header_text: 

<textarea data-bind="value: questions()[2].header_text"></textarea>

Привязки и функция обновления для answer_array: 

<textarea data-bind="event: {change: function(event){codebookModel.updateAnswerArray('2',event);}}" >
</textarea>

С этим кодом: 

updateAnswerArray: function( i, event ){
  T = event.target;
  this.questions()[i].answer_array = ko.observableArray(event.target.value.split('\n'));
}

Все прекрасно работает, пока я не попытаюсь обновить массив answer_array. Я уверен, что в модель вносятся изменения, но они не попадают в DOM.

Странно то, что изменение переменной header_text только для html работает отлично. Это только часть answer_array шаблона, которая не обновляется.

Есть идеи, почему это происходит и как это исправить?

1 Ответ

3 голосов
/ 23 сентября 2011

Вы устанавливаете answer_array равным новому observableArray, который ни к чему не привязан. Чтобы установить значение observableArray равным новому массиву, вы должны сделать: 

myObservableArray(myNewArray);

В вашем случае это будет: 

this.questions()[i].answer_array(event.target.value.split('\n'));
...