如何在車把余燼中定義自定義助手

Question

如何編寫顯示以下內容的余燼車把助手：

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

我需要在此處自定義value和text 。 並將這些值綁定到上下文。

我的方法不太有效：

我定義一個助手：

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，因此可以使用余燼組件代替普通的車把幫助器。

例：

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

Answer 2

如下進行

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

HBS

<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>');
});