Question

我正在开发一个Web应用程序。我在客户端使用Knockout.js。

在添加iframe之前，一切都还可以。 data-bind的{{1}}没问题但是外部的工作停止了。我无法点击按钮或在外页上做任何事情。

这是我的主页：

iframe

这是它的模型：

<!DOCTYPE html>
<html>

<head>
  <script data-require="jquery@*" data-semver="3.1.1" src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="knockout-3.4.2.js"></script>
  <script src="script.js"></script>
</head>

<body>
  username:
  <input data-bind="value: name" />
  <br /> age:
  <input type="text" data-bind="value: age" />
  <button data-bind="click: increase">Increase</button>
  <br />
  <button onclick="show()">show</button>
  <script>
    var show = function() {
      document.getElementsByTagName("body")[0].innerHTML = document.getElementsByTagName("body")[0].innerHTML + '<div><iframe src="iframe.html" width="300" height="300"></iframe></div>';
    }
  </script>
</body>

</html>

在那里我可以点击 Increase 按钮来增加$(document).ready(function() { function Outer(){ var self = this; self.name = ko.observable("thomas"); self.age = ko.observable(15); self.increase = function(){ self.age(self.age() + 1); } } ko.applyBindings(new Outer()); });值。但是当我点击 show 来显示age时，外页的数据就会消失。

这是iframe及其模型：

iframe

This is my example on Plunker

Answer 1

您的show功能正在用新副本替换页面中的所有html。这些副本不再受Knockout的约束。您应该以另一种方式添加<iframe>。例如，您可以使用Knockout！

<button data-bind="click: function() {showing(true)}">show</button>
<div data-bind="template: {name: 'iframe', if: showing}"></div>

<script type="text/html" id="iframe">
    <iframe src="iframe.html" width="300" height="300"></iframe>
</script>

添加Iframe时，Knockout.js数据绑定不起作用

1 个答案: