对部分模板使用变量 [英] Using variables for a partial template

问题描述

我绝对错过了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 将被称为部分的名称。

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

解决方案

部分存储在 Handlebars.partials



1. Handlebars.partials 可以是字符串或函数，因此您必须在第一次使用时编译partials。
   
2. Handlebars不知道部分是否为 text / plain 或 text / html ，因此您需要在 {{{...}}} 或 {{...}} 。
   
3. 这些东西没有完全记录（至少没有任何地方我可以找到），所以你必须对Handlebars源代码进行逆向工程，然后用 console.log（arguments）来弄清楚如何使用 Handlebars。


4. 您在调用助手时必须手动传递 this 。

不要担心，它并不是那么复杂。这样简单的事情：



  Handlebars.registerHelper（'partial'，function（name，ctx，hash）{
 （ps [name]）; 
返回ps [name]（ctx，hash）; 
}）; 
  

应该可以做到。然后你可以说：



  {{{partial mode this}}} 
  

然后继续进行更有趣的事情。

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

I'm definitely missing something about the way Handlebars works. I need to call different partials depending on the value of a variable. Currently the only way I've found to do it is this:

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

And in the corresponding JS:

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

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

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

...which strikes me as extremely verbose. What I'd really like to do is something like:

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

In other words, the value of mode would be the name of the partial that is called.

This seems like it must be a very common use-case, but I can't find any examples of this online. Where have I gone wrong?

解决方案

The partials are stored in Handlebars.partials so you can access them by hand in your own helper. There are a few tricky bits here though:

1. The contents of Handlebars.partials can be strings or functions so you have to compile the partials on first use.
2. Handlebars doesn't know if the partial will be text/plain or text/html so you'll need to call your helper in {{{...}}} or {{...}} as appropriate.
3. This stuff isn't exactly documented (at least not anywhere that I can find) so you have to reverse engineer the Handlebars source and fumble about with console.log(arguments) to figure out how to use Handlebars.partials.
4. You have to pass this by hand when you call the helper.

Fear not, it isn't really that complicated. Something simple like 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);
});

should do the trick. Then you can say:

{{{partial mode this}}}

and get on with more interesting things.

Demo: http://jsfiddle.net/ambiguous/YwNJ3/2/

这篇关于对部分模板使用变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！