Question

我正在使用以下帮助器来允许我进行条件比较：

Handlebars.registerHelper("ifCond", function (v1, operator, v2, options) {
  switch (operator) {
  case "==":
    return (v1 == v2) ? options.fn(this) : options.inverse(this);
  case "===":
    return (v1 === v2) ? options.fn(this) : options.inverse(this);
  case "<":
    return (v1 < v2) ? options.fn(this) : options.inverse(this);
  case "<=":
    return (v1 <= v2) ? options.fn(this) : options.inverse(this);
  case ">":
    return (v1 > v2) ? options.fn(this) : options.inverse(this);
  case ">=":
    return (v1 >= v2) ? options.fn(this) : options.inverse(this);
  default:
    return options.inverse(this);
  }
});

然后我的模板设置如下：

<select name="mode">
    {{#each data.modes}}
    <option {{#ifCond data.curmode '==' this}} selected="selected" {{/ifCond}} value="{{this}}">{{this}}</option>
    {{/each}}
</select>

我正在传递data，这是一个包含modes（可用模式的平面数组，字符串）和curmode的对象，这是一个包含当前所选模式的字符串。< / p>

据我所知，一切都正常通过 - 我可以正确显示data.curmode和每个data.modes填充。但是，它不会在匹配时输出selected="selected"。

Answer 1

当您使用迭代器（例如#each）时，块中的所有内容都将相对于当前元素引用。所以，如果你这样说：

{{#each a}}
    {{x}}
{{/each}}

句柄将在x的当前值内查找a，而不是在模板的全局命名空间中查找。因此，如果您希望获得最高级别{{#each data.modes}}，则需要在data.curmode值之外查看：

<select name="mode">
    {{#each data.modes}}
    <option {{#ifCond ../data.curmode '==' this}} ...
    {{/each}}
</select>

../让你上升一级。

演示：http://jsfiddle.net/ambiguous/Sz6VT/

Handlebar.js与{{this}}的条件比较

1 个答案: