如何使用KnockoutJS数据绑定iframe的内容？

任何人都可以告诉我如何使用Knockout将数据绑定到iframe ？ 我试过这样做，如下所示，但它没有按预期工作：

和Javascript：

 var ViewModel = function (content) { this.testcontent = ko.observable(content); }; ko.applyBindings(new ViewModel("Hello World!!")); 

我想在iframe添加“Hello Content”文本。 有人可以帮我吗？

Answer 1

这是一个稍微不同（更基本）的解决方案。 它允许您拥有一个具有整个h​​tml结构的observable，并使用该数据填充iFrame。 如果您更新html，则使用新版本更新iframe：

 ko.bindingHandlers.iframeContent = { update: function(element, valueAccessor) { var value = ko.unwrap(valueAccessor()); element.contentWindow.document.close(); // Clear the content element.contentWindow.document.write(value); } }; ko.applyBindings({ myHtml: ko.observable("\n\n\n\nMy fine text.\n\n\n") }); 

你可以在你的视图中使用这个：

 
Edit your html:
  
And see it appear in an iframe:
  

请参阅此jsfiddle以获取演示。 valueUpdate只是在那里，所以演示更清晰，如果在更大的场景中这是一个好主意，这是有争议的。

Answer 2

编辑：小提琴更新。

http://jsfiddle.net/sujesharukil/NnT78/10/

您需要为此创建自定义绑定处理程序。 我使用过http://jsfiddle.net/mbest/GYRUX/

并根据您的需要进行了更改。 看看两者，看看哪些适合您的需求。

 ko.bindingHandlers.bindIframe = { init: function(element, valueAccessor) { function bindIframe() { try { var iframeInit = element.contentWindow.initChildFrame, iframedoc = element.contentDocument.body; } catch(e) { // ignored } if (iframeInit) iframeInit(ko, valueAccessor()); else if (iframedoc){ var span = document.createElement('span'); span.setAttribute('data-bind', 'text: someProperty'); iframedoc.appendChild(span); ko.applyBindings(valueAccessor(), iframedoc); } }; bindIframe(); ko.utils.registerEventHandler(element, 'load', bindIframe); } }; 

Answer 3

你可以拥有这样的代码，工作得很好： –

 // This is a simple *viewmodel* - JavaScript that defines the data and behavior of your UI function AppViewModel() { this.externalUrl = ko.observable("http://www.w3schools.com"); } // Activates knockout.js ko.applyBindings(new AppViewModel()); 

要么