javascript - 剔除模板中的“添加”按钮会导致错误

Question

尝试在我的淘汰赛模板中包含一个添加按钮，如下所示，尽管我收到以下错误。如果我将按钮移到模板之外并在表单下方，它会奇怪地工作。任何想法为什么会发生这种情况？谢谢，

模板

<script type="text/html" id="mytemplate">   

<table data-bind="foreach: Keywords">
<tr>
  <td data-bind="text: $data"></td>
  <td>
      <a href="#" data-bind="click: $root.delete">Delete</a>
  </td>
</tr>
</table>

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

</script>

标记

@using (Html.BeginForm...)      
{
  <div data-bind="template: { name: 'mytemplate', data: mydata}"></div>
}

错误

Error: Error: Unable to parse bindings.
Message: ReferenceError: toAdd is not defined;
Bindings value: value: toAdd

Javascript（加载）

window.Helper = {
    Start: function (tag) {
        var viewModel = viewModel(tag);
        window.helper.ViewModel = viewModel; 
        viewModel.toAdd = ko.observable();
        viewModel.add = function () {  
            ...
        };
    ko.applyBindings(viewModel);

Answer 1

在您的template绑定中，您位于mydata属性的上下文中。

但是，您的toAddandadd是在根级别定义的，因此您需要在绑定中使用$root（或$parent取决于嵌套级别）来访问它们：

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

您可以在文档中阅读更多的绑定上下文。