handlebars.js - 为部分模板使用变量

Question

我肯定错过了关于 Handlebars 工作方式的一些东西。我需要根据变量的值调用不同的部分。目前我发现这样做的唯一方法是:

<template name="base">
  {{#if a}}{{> a}}{{/if}}
  {{#if b}}{{> b}}{{/if}}
  {{#if c}}{{> c}}{{/if}}
</template>

并在相应的 JS 中:

Template.base.a = function () {
  return (mode === "a");
}

Template.base.b = function () {
  return (mode === "b");
}

Template.base.c = function () {
  return (mode === "c");
}

...这让我觉得非常冗长。我真正想做的是:

<template name="base">
  {{> {{mode}} }}
</template>

换句话说， mode 的值将是被调用的部分的名称。

这似乎一定是一个非常常见的用例，但我在网上找不到任何这样的例子。我哪里出错了？

Answer 1

部分存储在 Handlebars.partials因此您可以在自己的助手中手动访问它们。不过这里有一些棘手的地方:

Handlebars.partials的内容可以是字符串或函数，因此您必须在第一次使用时编译部分。

Handlebars 不知道部分是否为 text/plain或 text/html所以你需要调用你的助手 {{{...}}}或 {{...}}作为适当的。

这些东西没有完全记录下来(至少在我能找到的任何地方都没有)，所以你必须对 Handlebars 源进行逆向工程并摸索 console.log(arguments)弄清楚如何使用Handlebars.partials .

你必须通过this当你调用助手时用手。

不要害怕，它并没有那么复杂。像这样简单的东西:

Handlebars.registerHelper('partial', function(name, ctx, hash) {
    var ps = Handlebars.partials;
    if(typeof ps[name] !== 'function')
        ps[name] = Handlebars.compile(ps[name]);
    return ps[name](ctx, hash);
});

应该做的伎俩。然后你可以说:

{{{partial mode this}}}

继续做更多有趣的事情。

演示: http://jsfiddle.net/ambiguous/YwNJ3/2/