添加Iframe時，Knockout.js數據綁定不起作用

我正在使用Web應用程序。我在客戶端使用Knockout.js。添加Iframe時，Knockout.js數據綁定不起作用

一切都可以，直到我添加iframe。 iframe的data-bind沒問題，但外面的停止工作。我無法點擊按鈕或在外部頁面上執行任何操作。

這是我的主頁：

<!DOCTYPE html> 
<html> 

<head> 
    <script data-require="[email protected]*" 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()); 
});

就在那裏我可以點擊增加按鈕來增加age值。但是當我點擊顯示以顯示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()); 
});

This is my example on Plunker

來源

2017-10-10 Thịnh Trần Văn

您是否嘗試檢查您的代碼並使用瀏覽器中的JS開發人員工具遍歷它？ – jdv

你show功能與新副本替換你的頁面中所有的HTML。這些副本不再受Knockout約束。您應該改爲以另一種方式添加。例如，您可以使用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>

來源

2017-10-12 22:50:49

添加Iframe時，Knockout.js數據綁定不起作用

回答

相關問題