我正在开发一个网络应用程序。我在客户端使用 Knockout.js。
在我添加 iframe 之前一切正常。 iframe 的 data-bind 没问题，但外部的停止工作。我无法在外部页面上单击按钮或执行任何操作。
这是我的主页:
<!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>
这是它的模型:
$(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显示iframe时，外层页面的数据消失了。
这是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());
});
最佳答案
您的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>
关于javascript - 添加 Iframe 时 Knockout.js 数据绑定(bind)不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46670221/