Ember.js 如何在运行多次的Ember组件模板中使用变量？

我需要从两个数组中生成一个随机字符串，其中包含一组人名和设备名。我有一个余烬计算属性，它做得非常好。除非计算属性只发生一次。因此，我最终得到了一个包含5行相同文本的列表

我这样做的原因是因为我从REST web服务获得了一个设备列表，但它们不能返回设备的名称，只能返回id和一系列其他信息。所以我现在应该用假名字，所以我想，没问题。我将为每一行生成一个随机名称。正如我已经说过的，我最终得出的结论是：

John's iPad                  <actual unique ID from the server>
John's iPad                  <actual unique ID from the server>
John's iPad                  <actual unique ID from the server>
John's iPad                  <actual unique ID from the server>
John's iPad                  <actual unique ID from the server>

所以这应该在每次property2更改时运行，除了。回到原点。如何更改属性2？我不能从hbs模板，从

{{{{each}}

中的代码来做。。然后我在某个地方读到了使用自定义帮助程序的内容，但根据我的经验，任何帮助程序都会将返回值封装在div中，这会破坏布局并导致

text
helper response
remaining text

当我想要的是：

text helper response remaining text

我的意思是，是的，我可以创建一个文本数组，然后传递索引，但是当我添加新数据时，我必须手动将项目添加到数组中，因为它不是为每一行数据动态生成的

使用我的方法，我随机选择了大量的名称和设备名称，因此无论返回多少数据，它都可以填充名称字段，直到他们在后端修复它以返回名称

我真的很想知道如何不仅解决这个问题，还想知道如何从页面/模板/等中的任何位置运行我想要的任何代码。不仅仅是静态属性或一次性计算属性

有时，您希望能够让模板在每次调用组件时都运行使用完全动态的变量

有时，您需要一个实际的帮助程序，它不会将响应封装在div中，因此您可以执行类似

的操作，答案是{{answer helper}}。

而不需要这样的输出：

The answer is
5
.

好的，首先是如果你不想输出数据。并且helper不封装div中的任何内容，helper也不是组件。组件通常生成

div

。但是如果您想要一个不产生

div

的组件，您可以将

标记名设置为
'

这就是你应该做的：使用两个组件：

设备列表/模板.hbs

设备项/模板.hbs

设备项/component.js

现在，数组中的每个项都有一个属性
myprop


另一个选项是将数组作为计算属性：

devicesWithNames: Ember.computed('devices.@each.foo', {
  get() {
    return this.get('devices').map(device => ({
      foo: device.foo,
      name: device.foo + 'bla', // anything you want to do
    }));
  }
}),


解决问题的另一种方法是使用


我真的很想知道如何不仅解决这个问题，还想知道如何从页面/模板/等中的任何位置运行我想要的任何代码。不仅仅是静态属性或一次性计算属性

你不能，这很好。这迫使您遵循干净的标准。例如，您不能仅从模板中调用组件上的代码。您可以调用帮助程序，或使用模板提供的数据。但这是一个单向数据流，这有助于理解组件如何工作。如果需要执行此操作，请使用computed属性，如果需要在
{{{each}}
循环中使用此属性，请编写另一个要在循环中使用的组件

有时，您希望能够让模板在每次调用组件时都运行使用完全动态的变量

看来你不明白这一点。但这是意料之中的事。被调用两次的组件将两次计算所有属性。但是，您需要了解，如果使用
{{{each}}
循环，您仍然在同一个组件中，那么您希望在哪里声明应该为数组中的每个实例运行的属性？这就是为什么您需要另一个组件。另一种选择是使用computed属性，该属性确实为您提供了一个新的不同数组，以及所有必需的数据。
这非常有用，我将在开始工作时介绍所有这些内容，但不幸的是，我注意到一些问题：（我在each中使用了一个单独的组件，但它仍然是相同的值。上面的示例使用静态字符串来返回，而不是使用数组[Math.random（）*array.length]+数组[Math.random（）*array.length]…方式不同，每次运行时，我所拥有的将有不同的值，您的示例总是返回string1与string2连接。关于帮助程序的事情很酷。我不知道..真希望Ember更好地执行Docso您说我不能在任何地方运行代码，但这里是在React中完成的：…页面上的示例。which看起来像是Ember中的一个助手。实际上，将这些表达式封装在Math.floor（）中…这就是我正在使用的。顺便说一句，非常感谢你的回答，这非常有帮助。我认为帮助者是解决这一问题的方法，我真的很喜欢帮助者这样做。我希望很多事情都能更容易找到，因为我真的很喜欢余烬以及所有事情的结构，但有时似乎很难找到如何做的方法。HM，我不认为一个助手是你应该使用的。但是我不明白你想要什么。你想从数组中列出数组还是单个项目？如果你需要一个提示做正确的事情，考虑加入松弛通道。
{{#each devices as |device|}}
  {{device-data device=device}}
{{/each}}

{{myprop}}

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',
  myprop: Ember.computed('device.foo', {
    get() {
      return this.get('device.foo') + 'bla';
    }
  }),
});

devicesWithNames: Ember.computed('devices.@each.foo', {
  get() {
    return this.get('devices').map(device => ({
      foo: device.foo,
      name: device.foo + 'bla', // anything you want to do
    }));
  }
}),