1

我目前正在使用带有内置模板引擎的 KnockoutJS。我想做的是创建一个其他模板可以构建的主模板。有点像 .NET 中的 UserControl，但在 HTML 中。

例子：

<script id="ParentTemplate" type="text/html">
    <div class="Container">
        <div class="Header">
            <!-- Header Content Here -->
        </div>

        <div class="Separator></div>

        <div class="Body">
            <!-- Body Content Here -->
        </div>

        <!-- more html here... -->

        <div class="Footer">
            <!-- Footer content here -->
        </div>
    </div>
</script>

<script id="ChildTemplate" type="text/html">
    <div data-bind="{template: { name: 'ParentTemplate' }}">
        <header>
            ...
        </header>

        <body>
            ...
        </body>

        <footer>
            ...
        </footer>
    </div>
</script>

ChildTemplate请忽略;的语法 我只是想说明将零件发送到ParentTemplate.

请注意：我正在构建一个纯 HTML/JQuery/KnockoutJS 单页应用程序。没有 .NET/PHP/等。协助这些模板。

4

1 回答 1

1

看看DurandalJS的组合。它是我认为您正在努力实现的目标的一个很好的框架

使用 DurandalJs，您可以将各个部分分离到单独的文件中

壳牌.html

<!DOCTYPE html>
<html>
  <head>
    <!- usual content -->
  </head>
  <body>
    <div data-bind="compose:'views/parent.html'"></div>
  </body>
</html>

父.html

<div class="Container">
  <div class="Header" data-bind="compose:'views/header.html'"></div>

  <div class="Separator></div>

  <div class="Body" data-bind="compose:'views/body.html'"></div>

  <!-- more html here... -->

  <div class="Footer" data-bind="compose:'views/footer.html'"></div>
</div>

我建议您查看文档，因为它非常好，并且有一些模板已经设置了基础知识

只使用 Knockout 进行编辑
，您可以使用

Javascript

var details = {
  header: 'this is the Page header',
  details: 'page details go here',
  footer: 'something about the footer goes here'
};

html模板

<script id="ChildTemplate" type="text/html">
    <div data-bind="template: { name: 'ParentTemplate', data: details }"></div>
</script>

<script id="ParentTemplate" type="text/html">
    <div class="Container">
        <div class="Header" data-bind='text: header'></div>

        <div class="Separator></div>

        <div class="Body" data-bind="text: details"></div>

        <!-- more html here... -->

        <div class="Footer" data-bind="text: footer"></div>
    </div>
</script>

如果您的页眉、详细信息和页脚包含 html 标记，那么我建议将绑定从文本更改为 html，以便正确呈现。

于 2013-07-18T01:14:35.030 回答