Как компоненты гнезда надлежащим образом

Question

я начиная с ember.js, и есть некоторые сомнения, что у меня есть:

Допустим, что я создаю простой чат, просто для примера. У меня есть панель слева со списком пользователей, а справа - панель с отправленными сообщениями.

Я рассмотрел вопрос о создании компонента : users-list, который отображает список пользователей. Каждый член этого списка должен быть другим компонентом под названием user.

Это означает, что userкомпонент отвечает рисунок себя, с именем пользователя, последним послал сообщение, имя цвета, и т.д ... (все свойства), а также имеют некоторые действия в кнопках рядом с его названием: changeName, changeColor, leaveRoom.

В то время как users-list отвечает за ведение списка пользователей и их отображение с использованием компонента user.

Таким образом, вопросы здесь:

1. Является ли это правильный путь?
2. Если это: Как я могу удалить элемент из компонента users-list, из действия внутри ребенка user компонента (leaveRoom action)?
3. Если нет: как мне это реализовать? Я бы хотел, чтобы обязанности были изолированы.

Answer 1

1. Является ли это правильный путь?

Да, это так. Но вы должны использовать дефис в имени компонента, поэтому компонент user должен выглядеть примерно так: user-component.

Если это: Как я могу удалить элемент из компонента пользователей-список, из действий внутри компонента пользовательского ребенка (действие leaveRoom)?

См. WORKING DEMO.

В users-list шаблоне передать действие (определенное в users-list) для user-component:

{{#each model as |user|}} 
    {{user-component model=user leaveRoom=(action 'leaveRoom')}} 
{{/each}} 

Действие leaveRoom в users-list:

actions: { 
    leaveRoom(user) { 
    alert('User-list: user ' + user.name + ' wants to leave room.'); 
    } 
} 

Тогда мы имеем простой user-component шаблон с кнопкой, которая запускает действие leaveRoom от user-component:

{{model.name}} - <button {{action 'leaveRoom' model}}>Leave room</button> 

Действие leaveRoom в user-component вызывает действие, переданное компоненту от users-list. Таким образом, leaveRoom в user-component выглядит следующим образом:

actions: { 
    leaveRoom(user) { 
    this.get('leaveRoom')(user); 
    } 
}