嵌套在iframe中的foreach内部的knockout模板

Question

嵌套在iframe中的foreach内部的knockout模板

3

我正在尝试将一个模板应用到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中，knockout可以找到一个简单绑定的模板，但是无法找到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可以进行绑定，但我正在寻找一种方法将我的模板留在其他视图中。

- Guillaume Dumont

1

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

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sifriday · Answer 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 require，在两个位置都包含单个文件，以便您不会重复代码。