我正在尝试将模板应用于 iframe 中的 foreach。
我举了一个简单的例子。
主要
<html>
<body>
<iframe src='iframe.html' width="300" height="300"></iframe>
</body>
</html>
脚本
window.onload = function() {
function MyViewModel() {
this.people = [
{ name: 'Franklin', credits: 250 },
{ name: 'Mario', credits: 5800 }
]
this.buyer = this.people[0];
}
DATA = new MyViewModel();
ko.applyBindings(DATA);
ko.applyBindings(DATA, window.frames[0].document.body);
};
在iframe中knockout可以找到模板进行简单的绑定(bind)但是他不能用foreach
<!--this Work -->
<div data-bind="template: { name: 'person-template', data: buyer }"></div>
<!--this does not -->
<div data-bind="template: { name: 'person-template', foreach: people }"></div>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
如果我在父 View 中添加模板，knockout 可以进行绑定(bind)，但我正在寻找一种方法将我的模板留在其他 View 中
最佳答案
Will 上面给出的链接确实揭示了一些见解。如果您将模板同时放在 iframe.html 和 index.html 中，它会起作用:
http://plnkr.co/edit/pJ2QnjcEd6qCz72o10YT?p=preview
现在我已经发布了一个 plnkr 链接，StackOverflow 希望我给你一些代码，所以这里是你的新 index.html 和你已经拥有的未注释的模板!我所做的只是删除评论标签，以便模板出现在两个 HTML 文件中。
<!DOCTYPE html>
<html>
<head>
<script data-require="knockout@*" data-semver="3.2.0" src="//cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<h1>Hello Plunker!</h1>
<script type="text/html" id="person-template">
<h3 data-bind="text: name"></h3>
<p>Credits: <span data-bind="text: credits"></span></p>
</script>
<iframe src='iframe.html' width="300" height="300"></iframe>
</body>
</html>
虽然在两个文件中都有您的模板似乎是代码重复，但希望您可以使用像 PHP 这样的服务器端机制要求在两个地方都包含一个文件，这样您就不会重复代码。
关于javascript - iframe 内的 foreach 内的 knockout 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28739815/