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

Question

I am working on an web application. 我正在开发Web应用程序。 I use Knockout.js on the client side. 我在客户端使用Knockout.js。

Everything is okay until I add an iframe . 一切正常，直到我添加了iframe 。 The data-bind of the iframe is okay but the outer's stops working. iframe的data-bind是可以的，但外部框架停止工作。 And I cannot click a button or do anything on the outer page. 而且我无法单击按钮或在外部页面上执行任何操作。

This is my home page: 这是我的主页：

<!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>

And this is its model: 这是它的模型：

$(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());
});

Right there I can click the Increase button to increase the age value. 在这里，我可以单击“ 增加”按钮以增加age值。 But when I click show to show the iframe , the data of the outer page disappears. 但是，当我单击“ 显示”以显示iframe ，外页的数据消失了。

This is the iframe and its model: 这是iframe及其模型：

$(document).ready(function() {
  function Inner(){
    var self = this;
    self.message = ko.observable("");
    self.text = ko.observable("begin");

    self.postData = function () {
      if (self.message().trim() !== '') {
        self.text(self.text() + "\n" + self.message())
      }
      self.message('');
    }
  }

  ko.applyBindings(new Inner());
});

This is my example on Plunker 这是我在Plunker上的例子

Answer 1

Your show function is replacing all of the html in your page with a new copy. 您的show函数正在用新副本替换页面中的所有html。 These copies aren't bound by Knockout anymore. 这些副本不再受淘汰赛的约束。 You should instead add the <iframe> another way. 您应该改为以其他方式添加<iframe> 。 For example, you can use 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 个解决方案

解决方案1
0 2017-10-12 22:50:49

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

问题描述

1 个解决方案

解决方案1 0 2017-10-12 22:50:49

解决方案1
0 2017-10-12 22:50:49