Question

I’m using knockout (awesome library), but I’ve run into a problem with templates: the DOM only changes for some of my observable objects, but not others. The behavior is kind of weird — it’s left me wondering what triggers a DOM update for a templated object in knockout.

Details: I’m building a simple survey editor. My model is an observableArray of questions, which is rendered through a jquery tmpl template. Users can edit the survey model using inputs that are bound on the page.

Here’s (a stripped-down version of) the model:

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

The template itself:

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

The template binding:

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

A binding for header_text:

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

Bindings and update function for answer_array:

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

With this code:

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

Everything works great until I try to update an answer_array. I’m certain the changes are being made in the model, but they aren’t getting pushed to the DOM.

The weird thing about this is that changing the html-only header_text variable works perfectly. It’s only the answer_array part of the template that doesn’t update.

Any ideas on why this is happening, and how to fix it?

Answer 1

You are setting answer_array equal to a new observableArray that is not bound to anything. To set the value of an observableArray equal to a new array, you want to do:

myObservableArray(myNewArray);

In your case that would be:

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