在Ember Octane版本中,我如何调用component.js中的方法,以便它简单地将字符串值返回到hbs模板中(而不创建帮助器)?
例如,我想为列表中的每一项,将索引值作为参数传递给randomColorClass()方法,以生成一个介于0和索引值之间的随机数。我知道我可以为它实现一个新的助手,但是有没有一种方法可以直接在component.js中实现它?
我之所以犹豫是否要使用helper,是因为helper是“全局”的,而且这个颜色类是唯一的,并且只在这个组件中定义。
组件.js
randomColorClass(max) {
const rand = Math.random() * max;
return `color-${Math.floor(rand)}`;
}
模板.hbs
{{#each this.list as |item index|}}
<div class={{this.randomColorClass index}}>
Hi, my name is {{item.name}}
</div>
{{/each}}
1条答案
按热度按时间qgelzfjb1#
从email protected(https://stackoverflow.com/cdn-cgi/l/email-protection)开始,helper可能是全局的,也可能不是全局的。
参见:https://guides.emberjs.com/release/in-depth-topics/rendering-values/
randomColorClass
位于组件中并从组件的模板中调用是非常好的。您可以使用helper、modifier和components来实现这一点--任何您可以获得引用的东西都可以直接呈现/调用该引用。
这是允许现代教程中的大多数内容工作的主要功能,在这里:https://tutorial.glimdown.com
只要你至少有email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),* 和 * 如果你至少有e email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),你的示例代码应该“只是工作”。
如果小于email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),则需要polyfill:https://github.com/ember-polyfills/ember-functions-as-helper-polyfill
如果你有小于email protected(https://stackoverflow.com/cdn-cgi/l/email-protection),你唯一的选择是一个全局助手。
无关,但我建议你从
pod
-组件移动到协同定位的辛烷组件。(如果您希望保持文件夹嵌套,请将两个文件分别重命名为index.js
和index.hbs
)