我如何编写一个显示此内容的余烬手柄助手:
<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助手时,如何访问模板中传递给助手的参数?
答案 0 :(得分:5)
由于你使用的是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/
答案 1 :(得分:1)
按如下方式进行,
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>');
});