我有一个包含占位符和按钮的组件。每当单击此按钮时，我都希望示例化并向占位符div添加一个子组件。这就像单击按钮时添加行一样。如何实现此行为？
下面是伪代码。
MainCompoent.hbs
<div id="placeHolder> </div>
<button onClick={{this.clickAdd}}> Add </button>
MainCompoent.js
@action
clickAdd() {
//How to initialize Row Component and add to the placeHolder
}
RowComponent.hbs
<div>
<input name>
<input age>
</div>我尝试了这样的东西，但它没有像预期的那样工作。
MainComponent.js
@action
addCondition (){
document.getElementById("placeholder").innerHTML += `<RowComponent/>`;
}
1条答案
按热度按时间a5g8bdjr1#
在任何前端框架中通常都不推荐直接操作DOM（如
MainComponent.js片段中所述），因为框架本身会有效地管理DOM。Ember的模板是声明性的，因此这种用例可以很容易地在模板中表达出来。因为你需要多次动态地呈现一个组件，这类似于在javascript中控制台多次记录一个变量。我们需要在初始化循环上下文后在模板中循环它们，使其最初只有一个条目。我们可以在每次用户点击Add按钮时动态地推送一个新条目。
伪代码如下所示：
第一个
希望这对你有帮助。