Handlerbars.js, использующий вспомогательную функцию в выражении #if - PullRequest
1 голос
/ 19 декабря 2011

С handlebars.js Я хочу отобразить два блока html в зависимости от полученного json.

Скажем, я хочу поблагодарить моего пользователя за заказ товаров в моем магазине.Я пишу свой шаблон handlerbars.js следующим образом:

<p>{{name}}</p>
{{#if costIsZero}}
  Can't find any order
{{else}}
    You bought {{cost}} items in our shop, thanks.
{{/if}}

Я пишу простой помощник для costIsZero следующим образом:

Handlebars.registerHelper('costIsZero', function(){
    return this.cost == 0
});

Когда я смешиваю его со следующими данными json:

var data = {
  "name":"foo",
  "cost": 9
};

Каким бы ни было значение "cost" {{#if costIsZero}}, оно всегда будет верным.Если я закомментирую самого помощника, и, следовательно, не имея ничего для costIsZero, он всегда возвращает false.

Весь приведенный выше код доступен как JSFiddle http://jsfiddle.net/gsSyt/

Что я делаю неправильно?

Возможно, я угоняю, как работает handlebars.js, но в таком случае, как мне реализовать мою функцию с помощью handlebars.js?

Ответы [ 2 ]

4 голосов
/ 22 декабря 2011

Помощники не вызываются при оценке выражения, такого как costIsZero.

Вы можете создать пользовательский помощник, который будет работать в качестве альтернативы if:

Handlebars.registerHelper('ifCostIsZero', function(block) {
    if (this.cost == 0) {
        return block(this);
    } else {
        return block.inverse(this);
    }
});

Что бы вы использовали, как это:

{{#ifCostIsZero}}
    Can't find any order
{{else}}
    You bought {{cost}} items in our shop, thanks.
{{/ifCostIsZero}}

В качестве альтернативы, вы можете использовать запас if (или unless), так как ваш тест равен нулю:

{{#if cost}}
    You bought {{cost}} items in our shop, thanks.
{{else}}
    Can't find any order
{{/if}}

Вы можете играть с обоими вариантами на http://jsfiddle.net/gsSyt/41/

0 голосов
/ 19 декабря 2011

Попробуйте это:

Handlebars.registerHelper('if', function(conditional, block) {
  if(this.cost == 0) {
    return block(this);
  } else {
    return block.inverse(this);
  }
})

http://jsfiddle.net/mZbtk/2/

...