在 ember 2.8 中的组件内创建 x 个组件

Question

所以我的 Ember 应用中有两个组件，游戏实例和游戏卡。这个想法是我将传递一个“卡片”编号属性给游戏实例，它将创建 x 个游戏卡片实例。这是设置

game.hbs（主文件）：

<div>
  {{input type="number" min="2" max="24" placeholder="enter a number from 4 to 24"
                        value=inputValue
                        key-up=handleInputChange}}

  {{game-instance cards=inputValue}}
</div>

游戏实例.hbs

<div>
  <!-- iteratively create game cards based on cards attribute passed -->
</div>

game-card.hbs

<div class="gamecard">
  <img src="" />
</div>

在尝试弄清楚如何编写 game-instance.hbs 逻辑时，我看到了把手如何允许您遍历数组。这不是我真正想要的。我想要的是这种行为：

1. game-instance 读取从 game.hbs 传递的卡片属性。在这种情况下，我们假设 6

2. 一种 for 循环逻辑在游戏实例中创建六个游戏卡实例。

是否有适当的把手语法来实现这一点？如果没有，我怎样才能实现类似的行为？非常感谢。

Answer 1

想法是您需要使用 component 助手和带有卡片数组的 #each 块。这样每当我们更改卡片数组时，它都会重新渲染整个块。

用户输入后，您可以创建/更新cardsArray。会在游戏实例组件中自动重新渲染游戏卡组件

game-instance.hbs

{{#each cardsArray as |value,index|}}
 {{component 'game-card' value }}
{{/each}}

每当我们使用 pushObject 或更改整个引用更改 cardsArray 时，就会呈现 each 块。