iframe 内的 foreach 内的淘汰赛模板答案

【问题标题】：knockout template inside foreach inside an iframeiframe 内的 foreach 内的淘汰赛模板
【发布时间】：2015-04-28 16:11:04
【问题描述】：

我正在尝试将模板应用于 iframe 内的 foreach。

我做了一个简单的例子。

Plunker

主要

<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 敲除中可以找到简单绑定的模板但他不能用 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>

如果我在父级中添加模板，敲除可以进行绑定，但我正在寻找一种方法将我的模板留在另一个视图中

【问题讨论】：

我认为这可能是相关的，看起来你需要一个自定义模板引擎github.com/knockout/knockout/pull/405

标签： javascript iframe knockout.js

【解决方案1】：

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 这样的服务器端机制要求在两个地方都包含一个文件，这样您就不会重复代码。

【讨论】：