有没有一种方法可以用参数调用Ember Octane组件方法,并让它返回文本,而不需要实现帮助程序?

6qftjkof  于 2023-10-18  发布在  其他
关注(0)|答案(1)|浏览(154)

在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}}
qgelzfjb

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.jsindex.hbs

相关问题