Qu'est-ce qui déclenche la mise à jour d'un modèle knockout.js?

Question

J'utilise knockout (awesome library), mais j'ai rencontré un problème avec les templates: le DOM ne change que pour certains de mes objets observables, mais pas pour d'autres. Le comportement est un peu bizarre - il m'a laissé me demander ce qui déclenche une mise à jour DOM pour un objet modélisé dans KO.

Détails: Je construis un éditeur de sondage simple. Mon modèle est un observableArray de questions, qui est rendu à travers un template tmpl jquery. Les utilisateurs peuvent modifier le modèle d'enquête à l'aide d'entrées liées à la page.

est ici (une version allégée) du modèle:

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"])} 
    ]) 
}; 

Le modèle lui-même:

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

Le modèle de liaison:

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

une liaison pour header_text:

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

consolidations et fonction de mise à jour pour answer_array:

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

Avec ce code:

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

Tout fonctionne bien jusqu'à ce que je tente de mettre à jour un answer_array. Je suis certain que les changements sont faits dans le modèle, mais ils ne sont pas poussés vers le DOM. Ce qui est bizarre à propos de cela, c'est que la modification de la variable header_text html-only fonctionne parfaitement. Seule la partie answer_array du modèle ne se met pas à jour.

Des idées sur pourquoi cela se passe-t-il et comment y remédier?

Answer 1

Vous définissez answer_array comme étant un nouveau observableArray qui n'est lié à rien. Pour définir la valeur d'un observableArray égal à un nouveau tableau, vous voulez faire:

myObservableArray(myNewArray); 

Dans votre cas, ce serait:

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