Question

我正在尝试将模板应用于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淘汰赛中可以找到简单装订的模板，但他不能使用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>

如果我在父母中添加模板，

knockout可以进行绑定，但是我正在寻找一种方法将模板留在另一个视图中

Answer 1

以上链接会给出一些见解。如果您将模板放在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这样的服务器端机制，在两个地方都包含一个文件，这样你就不会重复代码了。

在iframe内的foreach里面的淘汰赛模板

1 个答案: