使用 Knockout 和模板解析错误答案

【问题标题】：parse error with Knockout and templates使用 Knockout 和模板解析错误
【发布时间】：2014-01-06 23:10:44
【问题描述】：

我的模板是这样包含的，尽管我在浏览器中遇到错误，如下所示。如果我将输入和按钮移到模板之外，它可以工作，尽管我不明白为什么。任何人都可以建议，因为我对淘汰赛还很陌生。谢谢，

<div data-bind="template: { name: 'keyword-template', data: Article }"></div>

模板具有以下标记。

更新

<script type="text/html" id="keyword-template"> 
  <div> 

    <table class="KeywordList" data-bind="foreach: Keywords">
    <tr>
      <td data-bind="text: $data">
      </td>
      <td data-bind="click: $root.delete">
      </td>
    </tr>
    </table>

    <input data-bind="value: toAdd" />
    <button data-bind="click: add">Add</button>     

  </div>                              
</script>

在浏览器中运行此代码时出现以下错误

错误

错误：错误：无法解析绑定。消息：ReferenceError：添加未定义；绑定值：点击：添加源文件：/js/libs/knockout-2.2.0.js 线路：57

更新：包括 Javascript

window.helper = {
Start: function (tagging) {
  var viewModel = helper.viewModel(tagging);
  window.helper.ViewModel = viewModel;

  viewModel.keywords = ko.observableArray(viewModel.Keywords().split('|'));
  viewModel.toAdd = ko.observable();
  viewModel.add = function () {
    viewModel.keywords.push(viewModel.toAdd());
  }
};

【问题讨论】：

标签： knockout.js

【解决方案1】：

我不确定您是否包含所有 Javascript，但视图模型中应该有一个 add 函数可以调用，这就是错误显示的内容：

function Article() {
    var self = this;
    self.Title = ko.observable();
    self.Body = ko.observable();

    self.add = function() {
        // do what is required for the add function here
    };
}

或者，如果您的添加事件高于此视图模型，那么您需要将按钮更改为：

<button data-bind="click: $parent.add">Add</button>

【讨论】：

【解决方案2】：

我的猜测是这个模板是在 foreach 循环中使用的，但“add”函数是在视图模型的根目录中定义的？在“foreach”绑定中，数据绑定的上下文是被迭代的单个元素。您需要绑定到“$parent.add”甚至“$root.add”。

请参阅Knockout documentation on the binding context 了解更多信息。

【讨论】：

您将视图绑定到视图模型，因此您需要在视图模型中包含 add 和其他功能