警告:これには明らかにセキュリティへの影響があります! これは、絶対に信頼できるソースからのコードでのみ行ってください。
これは、構築するための基本的で簡単なソリューションです。これにより、html 構造全体でオブザーバブルを保持し、そのデータで 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("<html>\n<head><title>Test</title></head>\n<body>\n\nMy <em>fine</em> text.\n\n</body>\n</html>")
});
これをビューで次のように使用できます。
<p>Edit your html:</p>
<textarea data-bind="value: myHtml, valueUpdate: 'afterkeydown'"></textarea>
<p>And see it appear in an iframe:</p>
<iframe data-bind="iframeContent: myHtml"></iframe>
デモについては、この jsfiddleを参照してください。はvalueUpdate
単にそこにあるだけなので、デモはより明確になります。より大きなシナリオでそれが良いアイデアであるかどうかは議論の余地があります.