javascript - 如何使用 Handlebars 在父视图中动态分配部分视图？

Question

我对 web 应用程序开发和 Handlebars & Sammy 框架都有些陌生，所以如果这是一个有点明显的问题，请原谅。

我为如下所示的页面创建了一个主视图模板：

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

page我的部分观点在哪里。我正在尝试解决以下问题：

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

我正在使用 JS 框架Sammy来处理这些视图的创建，但据我从他们的API 文档中了解到，该框架没有处理我的情况的RenderorPartial方法（能够同时指定父视图和子视图）。

我错过了什么，还是我必须以“不那么酷”的方式来做？

score 0 · Accepted Answer

让我允许自己回答我自己的问题——对于未来的初学者。我花了一些时间才弄清楚，但现在一切正常。

Sammy 的Render- 方法实际上采用一个对象，该对象包含部分视图名称（键）的键值对和数据本身之后的部分视图（值）的路径。我的实现最终看起来像这样：

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

subView-string 只是在路由之间更改，但如果这是您的情况，也可以为一条路由动态更改（显然）。要包含您的局部视图，只需在模板的局部视图语法中提及它：

{{>subView}}

它将被包括在内。

1 回答 1