Как добавить дочерний компонент в основной компонент через javascript в Ember Octane - PullRequest
Новая
       50

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

0 голосов
/ 20 января 2020

У меня есть компонент с заполнителем и кнопкой. Всякий раз, когда нажимается эта кнопка, я хочу создать экземпляр и добавить дочерний компонент в заполнитель 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/>`;
}

enter image description here

1 Ответ

2 голосов
/ 20 января 2020

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

Поскольку вам необходимо многократно работать с рендерингом компонента, это похоже на то, как консоль регистрирует переменную несколько раз. в javascript. Нам нужно l oop их в шаблоне после инициализации цикла, чтобы сначала была одна запись. Мы можем динамически создавать новую запись sh каждый раз, когда пользователь нажимает кнопку Добавить .

Псевдокод будет иметь вид: 

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>

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

...