如何使用Handlebars在父视图中动态分配局部视图?

时间:2012-08-20 23:49:36

标签: javascript web-applications handlebars.js sammy.js

我对网络应用程序开发和Handlebars& amp;萨米框架,如果这是一个有点明显的问题,请原谅。

我为页面创建了一个主视图模板:

<article id="imageWrapper">
    <img src="{{img.url}}" alt="{{img.title}}" />
</article>
<article id="pageContent">
    {{> page}}
</article>

其中page是我的部分观点。我正在努力实现以下解决方案:

我有几种不同的页面类型(如网格状图库,一些纯文本页面等),但它们都遵循这种总体布局。我没有将这些代码片段复制并粘贴到x个子页面视图中,而是想创建一个所有子视图“继承”的“主视图” - 这样我的图库视图和文本视图都具有相同的外部结构,但仍然可以在其他地方指定自己的子视图。

我正在使用JS框架Sammy来处理这些视图的创建,但据我所知API documentation,框架没有RenderPartial方法处理我的情况(能够同时指定父视图和子视图)。

我错过了什么,或者我必须以“不那么酷”的方式做到这一点?

1 个答案:

答案 0 :(得分:0)

让我允许自己回答我自己的问题 - 对于未来的初学者。花了我一些时间来弄清楚,但现在一切都按照它应该的方式运作。

Sammy的Render - 方法实际上是一个对象,它持有部分视图名称(键)的键值对,以及数据本身之后的部分视图(值)的路径。我的实现最终看起来像这样:

context.render('templates/contentPage.hb', item, {subView: 'templates/textView.hb'});

subView-string只是在路由之间进行了更改,但也可以动态更改为一条路径(显然),如果这是你的情况。要包含部分视图,只需在模板的部分视图语法中提及它:

{{>subView}}

它将被包含在内。