Question

我目前正在使用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 /等。协助这些模板。

Answer 1

查看DurandalJS的作文。它是我认为你想要实现的一个很好的框架

使用DurandalJs，您可以将各个部分分成单个文件

<强> Shell.html

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

<强> Parent.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>  <div class="Footer" data-bind="text: footer"></div> </div> </script>

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

如何继承HTML模板？

1 个答案: