车把模拟开关(外壳)

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

是的，一旦添加了相关的帮助器函数，就可以使用下面描述的语法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 2

您需要一个帮助器来进行比较。这与Mustache提出的无逻辑模板语言的前提背道而驰。然而，它是实用的。

我喜欢使用内置的if/else帮助器(参见文档中的Helpers: Conditionals )，而不是定义切换用例，并且只将比较操作定义为帮助器。

辅助对象

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 3

请参阅this注释

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