如何在handlebars代码中定义自定义助手

How to define a custom helper in handlebars ember

本文关键字：定义 自定义 代码 handlebars      更新时间：2023-09-26

如何编写一个ember把手栏帮助器来显示以下内容:

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

我需要在这里定制value和text。并将这些值绑定到上下文。

我的方法不太管用:

我定义了一个helper:

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

然后使用:

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

当定义Handlebars helper时，我如何访问模板中传递给helper的参数?

因为你使用的是Ember，所以你可以使用Ember组件而不是普通的把手栏帮助器。

的例子:

 <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/

按以下步骤操作，

http://emberjs.jsbin.com/yimecihutuka/1/edit

哈佛商学院

<script type="text/x-handlebars" data-template-name="index">
    <ul>
    {{#each item in model}}
      <li>{{item}}</li>
    {{/each}}
    </ul>
    {{progress-bar "50" status}}
  </script>

js 

App.IndexController = Ember.Controller.extend({
  status:"the status"
});

Ember.Handlebars.helper('progress-bar', function(value, status) {
    return new Ember.Handlebars.SafeString('<div value="' + value + '">' + status+ '</div>');
});
相关文章：