Handlebar.js與{{this}}的條件比較

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 （可用modes的平面數組，字符串）的對象，而curmode是一個包含當前所選模式的字符串的對象。

據我所知，一切順利進行-我可以顯示data.curmode並且每個data.modes正確填充。 但是，它不會在匹配時輸出selected="selected" 。

Answer 1

當使用迭代器（例如#each ，相對於當前元素引用塊中的所有內容。 因此，如果您這樣說：

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

把手會尋找x的當前值中a ，而不是在模板的全局命名空間。 因此，如果您想獲取頂級data.curmode ，則需要查看{{#each data.modes}}值data.curmode ：

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

../您提升一個級別。

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