Как добавить дочерний компонент к основному через javascript в Ember Octane

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

Прямые манипуляции с DOM (как указано в вашем MainComponent.jssnippet) обычно не рекомендуется ни в одной из фреймворков внешнего интерфейса, так как сам фреймворк будет эффективно управлять DOM. Шаблоны Ember декларативны по своему дизайну, поэтому этот вариант использования можно легко выразить в шаблоне.

Поскольку вам нужно работать с рендерингом компонента несколько раз динамически, это похоже на консоль, несколько раз регистрирующую переменную в ja vascript. Нам нужно зациклить их в шаблоне после инициализации контекста зацикливания, чтобы сначала иметь одну запись. Мы можем динамически вставлять новую запись каждый раз, когда пользователь нажимает кнопку " Добавить".

Псевдокод будет выглядеть так:

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>

Надеюсь это поможет.