ember.js - 如何在 Ember Octane 中通过 javascript 将子组件添加到主组件

Question

我有一个带有占位符和按钮的组件。每当单击此按钮时，我都想实例化一个子组件并将其添加到占位符 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/>`;
}

Answer 1

MainComponent.js在任何前端框架中通常不建议直接 DOM 操作（如您的代码段中所述），因为框架本身将有效地管理 DOM。Ember 的模板在设计上是声明性的，因此这个用例可以很容易地在模板中表达。

由于您需要动态地多次渲染组件，因此它类似于控制台在 javascript 中多次记录 a 变量。在初始化循环上下文后，我们需要在模板中循环它们以首先具有单个条目。每次用户点击添加按钮时，我们都可以动态推送一个新条目。

伪代码如下：

MainComponent.js

@tracked rows = [{ name: '', phone: '' }];

@action
clickAdd() {
  this.rows.push({ name: '', phone: '' });
  this.rows = this.rows; // to re-render the template 
}

MainComponent.hbs

{{#each this.rows as |row|}}
  <RowComponent @row={{row}} />
{{/each}}

<button onClick={{this.clickAdd}}> Add </button>

希望这可以帮助。