【问题标题】:Using variables for a partial template为部分模板使用变量
【发布时间】:2013-08-27 23:04:54
【问题描述】:

我肯定错过了 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 的值将是被调用部分的名称。

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

【问题讨论】:

  • 官方的 dynamic partials(来自 Joshua)真的应该是这里的默认答案。

标签: handlebars.js partials


【解决方案1】:

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

  1. Handlebars.partials 的内容可以是字符串或函数,因此您必须在首次使用时编译部分内容。
  2. Handlebars 不知道分部是 text/plain 还是 text/html,因此您需要酌情在 {{{...}}}{{...}} 中调用您的助手。
  3. 这些东西没有完全记录在案(至少在我能找到的任何地方都没有),因此您必须对 Handlebars 源进行逆向工程并摸索console.log(arguments) 以弄清楚如何使用Handlebars.partials
  4. 调用助手时必须手动传递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/

【讨论】:

  • 感谢您指出这一点!就像你说的官方文档在部分方面真的很糟糕。
  • @Fractalf:我听说,官方的“文档”还有很多不足之处,我不得不多次查看源代码才能弄清楚发生了什么。
  • 如果需要服务器端版本,可以在这里找到stackoverflow.com/a/27820812/1563880
【解决方案2】:

2016 年更新Version 3 of handlebars addedDynamic Partials。来自文档:

可以使用子表达式语法动态选择要执行的部分。

{{> (whichPartial) }}

将评估whichPartial,然后渲染名称由此函数返回的部分。

子表达式不解析变量,所以whichPartial 必须是一个函数。如果一个简单变量具有部分名称,则可以通过 lookup 帮助器解决它。

 {{> (lookup . 'myVariable') }}

【讨论】:

    猜你喜欢
    • 2020-07-10
    • 1970-01-01
    • 2015-02-04
    • 2019-02-06
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多