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

【问题标题】：How to dynamically allocate a partial view within a parent view with Handlebars?如何使用 Handlebars 在父视图中动态分配部分视图？
【发布时间】：2012-08-16 07:40:23
【问题描述】：

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

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

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

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

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

我正在使用 JS 框架 Sammy 来处理这些视图的创建，但据我所知，从他们的 API documentation 可以理解，该框架没有处理的 Render 或 Partial 方法根据我的情况（能够同时指定父视图和子视图）。

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

【问题讨论】：

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

【解决方案1】：

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

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

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

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

{{>subView}}

它将被包括在内。

【讨论】：