如何在 Ember Octane 中通过 javascript 向主组件添加子组件

Question

I have a component with a placeholder and button. Whenever this button is clicked I want to instantiate and add a child component to the placeholder div. It's like adding rows on button click. How do I implement this behaviour.

Here is the pseudo code.

 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>

I tried something like this but it did not work as expected.

MainComponent.js

@action
addCondition (){       
    document.getElementById("placeholder").innerHTML += `<RowComponent/>`;
}

Answer 1

Direct DOM manipulation (as mentioned in your MainComponent.js snippet) is generally not recommended in any of the frontend frameworks as the framework itself will manages the DOM efficiently. Ember's templates are declarative by design and hence this use case can be expressed in the template easily.

Since you need to work with the rendering of a component multiple times dynamically, it's similar to console logging the a variable multiple times in javascript. We need to loop them in the template after initializing the looping context to have a single entry at first. We can dynamically push a new entry every time the user hits the Add button.

The pseudo-code would be like:

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>

Hope this helps.