javascript - 如何在 Handlebars Ember 中定义自定义助手

Question

我如何编写一个 ember handlebars helper 来显示这个:

<div value="40">text</div>

我需要在这里自定义value和text。并将这些值绑定(bind)到上下文。

我的方法不太奏效:

我定义了一个助手:

Ember.Handlebars.helper('progress-bar', function(value, options) {
    return '<div value="' + value + '">' + options.text + '</div>';
});

然后使用它:

{{progress-bar value="50" text="this.status"}}

在定义 Handlebars 助手时，如何访问传递给模板中助手的参数？

Answer 1

由于您使用的是 Ember，因此您可以使用 ember 组件而不是普通的 handlebars 助手。

例子:

 <script type="text/x-handlebars" id="index">
   {{my-component value="foo" text="bar"}}
 </script>

<script type="text/x-handlebars" id="components/my-component">
  <div {{bind-attr value="value"}}>
    {{text}}
  </div>
</script>

使用组件的好处是您不必编写任何 javascript - Ember 会生成所有管道代码。您可以在此处找到有关组件的更多信息:http://emberjs.com/guides/components/defining-a-component/