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

Question

所以我的Ember应用程序，游戏实例和游戏卡中有两个组件。我的想法是，我将通过一张卡片＆＃39;数字属性到游戏实例，它将创建游戏卡的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>

游戏instance.hbs

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

游戏card.hbs

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

当试图弄清楚如何编写game-instance.hbs逻辑时，我已经看到了把手如何允许你迭代一个数组。这不是我想要的。我想要的是这种行为：

1. 游戏实例读取从game.hbs传递的卡片属性。在这种情况下，让我们假设6

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

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

Answer 1

想法是你需要使用component帮助器和带卡阵列的#each块。这样每当我们改变卡片阵列时，它将重新渲染整个块。

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

<强>游戏instance.hbs

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

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