Javascript iframe内foreach内的敲除模板_Javascript_Iframe_Knockout.js

Javascript iframe内foreach内的敲除模板

javascript iframe knockout.js

Javascript iframe内foreach内的敲除模板,javascript,iframe,knockout.js,Javascript,Iframe,Knockout.js,我正在尝试将模板应用于iframe中的foreach 我举了一个简单的例子主要在Iframe中，knockout可以找到用于简单绑定的模板，但他无法使用foreach  <div data-bind="template: { name: 'person-template', data: buyer }"></div>  <div data-bind="tem

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

我举了一个简单的例子

主要

在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可以进行绑定，但我正在寻找一种方法，将我的模板保留在另一个视图中

上面的链接给出了一些见解。如果将模板同时放在iframe.html和index.html中，它将起作用：

现在我已经发布了一个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）在两个文件中都包含一个文件，这样您就不会复制代码。

我认为这可能是相关的，看起来您需要一个自定义模板引擎

<!--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>

<!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>