什么触发了 knockout.js 模板更新？答案

【问题标题】：What triggers a knockout.js template to update?什么触发了 knockout.js 模板更新？
【发布时间】：2011-11-23 06:37:39
【问题描述】：

我正在使用敲除（很棒的库），但我遇到了模板问题：DOM 仅针对我的一些可观察对象发生变化，而对其他对象则没有。这种行为有点奇怪——让我想知道是什么触发了淘汰赛中模板化对象的 DOM 更新。

详细信息：我正在构建一个简单的调查编辑器。我的模型是一个 observableArray 的问题，通过 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。

奇怪的是，更改仅 html 的 header_text 变量效果很好。只有模板的 answer_array 部分不会更新。

关于为什么会发生这种情况以及如何解决它的任何想法？

【问题讨论】：

标签： templates knockout.js jquery-templates

【解决方案1】：

您将 answer_array 设置为一个新的 observableArray，它没有绑定到任何东西。要将 observableArray 的值设置为等于新数组，您需要这样做：

myObservableArray(myNewArray);

你的情况是：

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

【讨论】：