Javascript 生成了 HTML 代码调用敲除

Question

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

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

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

问题是，我在调用 js 文件中的敲除函数的表单上呈现按钮，但它们不起作用。我可以使用 javascipt 引用这些按钮，但这不起作用，因为我需要将淘汰模型传递给表单。

代码如下：

在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 格式....只是没有响应的敲除调用（对 helloWorld）。

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

Answer 1

如果您在调用 applyBindings 后使用 Knockout 而不是 添加内容到页面，Knockout 无法知道它必须处理这些元素。为此，您需要告诉 Knockout 将绑定应用到这些新元素，使用 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>

Javascript 生成了 HTML 代码调用敲除

Javascript generated HTML code calling knockout

html

javascript

jquery

twitter-bootstrap

knockout.js