Question

我想模拟这样的东西：

{{#each this}}
   {{if @index == 0}}
      <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
   {{else @index == 1}}
      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
   {{else if}}
      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
{{/each}}

那有可能吗？

Answer 1

您需要一个帮手进行比较。这种类型与 Mustache 提出的无逻辑模板语言的前提背道而驰。不过很实用。

我喜欢使用内置的 if/else 助手（参见文档中的 Helpers: Conditionals）而不是定义 switch-case，并且只将比较操作定义为帮手。

帮手

Handlebars.registerHelper('isEqual', (value1, value2, options) => {
  return value1 === value2;
});

模板


{{#each this}}
   {{#if (isEqual @index 0)}}
      <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
   {{else if (isEqual @index 1)}}
      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
   {{else}}
      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
   {{/if}}
{{/each}}

Answer 2

是的，一旦添加了相关的辅助功能，就可以使用here中所述的以下语法来实现。

帮助功能

Handlebars.registerHelper('switch', function(value, options) {
  this.switch_value = value;
  return options.fn(this);
});

Handlebars.registerHelper('case', function(value, options) {
  if (value == this.switch_value) {
    return options.fn(this);
  }
});

切换

{{#switch this}} 
   {{#case 0}}
      <li><img src="/Content/totem/images/0.png" alt="" height="200" width="200" /></li>
   {{/case}}
   {{#case 1}}
      <li><img src="/Content/totem/images/1.png" alt="" height="200" width="200" /></li>
   {{/case}}
   {{#case 2}}
      <li><img src="/Content/totem/images/2.png" alt="" height="200" width="200" /></li>
   {{/case}}
{{/switch}}

Answer 3

查看 this 条评论

{{> (lookup . state) }}
{{#*inline "page1"}}page 1{{/inline}}
{{#*inline "page2"}}page 2{{/inline}}
{{#*inline "undefined"}}page 2{{/inline}}

车把模拟开关（案例）

3 个答案:

帮手

模板