Handlebar.js与｛｛this｝｝的条件比较

Handlebar.js Conditional comparison to {{this}}

本文关键字：条件 比较 this js Handlebar      更新时间：2023-09-26

我使用以下助手来进行条件比较：

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，它是包含当前所选模式的字符串。

据我所知，一切都很顺利——我可以正确显示data.curmode和每个data.modes。然而，它并没有在匹配时输出selected="selected"。

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

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

Handlebars将在a的当前值中查找x，而不是在模板的全局命名空间中查找。因此，如果您想获得顶级data.curmode:，则需要查看{{#each data.modes}}值之外的内容

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

../让您更上一层楼。

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

相关文章：