Javascript 生成 HTML 代码调用 knockout

Question

不确定这是否可行，但就这样了。

我有一个包含两个主要文件的应用程序 - 一个 javascript 文件和一个 HTML 文件，我正在使用 knockout.js、bootstrap 和 jquery。

在 js 文件的函数内，我生成了一个 html 表单。我不能将 html 文件中的表单设置为不可见 - 它必须在 js 文件中生成。

问题是，我在表单上渲染按钮，这些按钮调用 js 文件中的 knockout 函数，但它们不起作用。我可以使用 javascipt 引用这些按钮，但这不起作用，因为我需要将 knockout 模型传递到表单。

代码如下:

在js文件中:

    self.helloFunction = function () {
         alert("Hello World");
}

在 html 文件中(按预期工作):

<div>
<input type="image" src="/Images/Buttons/edit.png" data-bind="click: $root.helloFunction" class="input-sm">
</div>

在 JS 文件中(不会调用 helloFunction):

var helloWorld = '<div>' +
'<input type="image" src="/Images/Buttons/edit.png" data-bind="click: '$root.helloFunction" title="Hi" class="input-sm">' +
'</div>';

//display the html on the page:
displayForm(helloWorld);

它显示良好，标题和图像显示， Bootstrap 格式已应用......这只是 knockout 调用(对 helloWorld)没有响应。

是否可以返回并调用我的 knockout 函数？

Answer 1

如果您在调用 applyBindings 之后使用 Knockout 添加内容到页面而不，Knockout 无法知道它必须处理这些元素。为此，您需要告诉 Knockout 将绑定(bind)应用到这些新元素，使用 applyBindings (但要小心避免在同一元素上调用它两次)或未记录的 applyBindingsToNode 或 applyBindingsToDescendants。

示例:

var vm = {
  msg1: ko.observable("Hi there"),
  msg2: ko.observable("This was bound later; click me!"),
  clicker: function() {
    alert("clicker was clicked!");
  }
};
ko.applyBindings(vm, document.body);
setTimeout(function() {
  var newContent = $('<input type="button" data-bind="value: msg2, click: clicker">');
  newContent.appendTo("#container");
  ko.applyBindings(vm, newContent[0]);
}, 500);

<div id="container">
  <div data-bind="text: msg1"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>