如何在车把 ember 中定义自定义助手

Posted 2023-03-07

【中文标题】如何在车把 ember 中定义自定义助手

【英文标题】：How to define a custom helper in handlebars ember

【发布时间】：2014-10-05 07:47:12

【问题描述】：

我如何编写一个 ember 车把助手来显示这个：

<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 助手时，如何访问模板中传递给助手的参数？

【参考方案1】：

由于您使用的是 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/

【讨论】：

好的，谢谢，我认为这是正确的做法。组件是否在幕后定义了车把助手？

我不知道它到底是怎么做到的，但是是的，我相信它定义了一个把手助手来挂钩组件渲染。

【参考方案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>');
);