我该如何继承HTML模板？

我目前正在使用KnockoutJS及其内置的模板引擎。我想要做的是创建一个其他模板可以构建的主模板。有点像在.NET中的UserControl，但在HTML中。我该如何继承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 /等。协助这些模板。

来源

2013-07-18 Laith

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

我建议你看一下documenta重刑，因为它是非常好，有一些已经建立

编辑
只是用淘汰赛基础几个模板，你可以使用

的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-18 01:14:35

纯粹的图书馆建议可能应该是一个评论。我想完整的答案将提供一个简单的例子，说明如何真正实现OP的目标。 – millimoose

是啊，够公平的。我会尽量扩大答案。 –

+1，用于向我介绍DurandalJS，但是这种解决方案迫使我将父母分成单独的模板并稍后加入，而不是在子模板中注入部分的父模板。所以你最终只有两个物理模板。这个解决方案最终有4个或更多。 – Laith

我该如何继承HTML模板？

回答

相关问题