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

时间:2016-10-06 11:15:09

标签: ember.js handlebars.js

所以我的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>

游戏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循环逻辑在游戏实例中创建六个游戏卡实例。

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

1 个答案:

答案 0 :(得分:0)

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

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

<强>游戏instance.hbs

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

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