如何以适当的方式嵌套组件

Question

我从EMBER.js开始，我有一些疑问：

假设我正在创建一个简单的聊天，仅供参考。我有一个带有用户列表的左侧面板，以及一个发送消息的右侧面板。

我考虑创建一个名为users-list的组件，它会显示一个用户列表。该列表的每个成员都应该是另一个名为user的组件。

这意味着user 组件负责绘制自身，包括用户名，最后发送的消息，名称颜色等...（所有属性）并且还具有名称旁边的按钮中的一些操作：changeName，changeColor，leaveRoom。

users-list负责维护用户列表并使用user组件显示用户。

所以这里的问题是：

1. 这是正确的方法吗？
2. 如果是：如何从users-list组件（user组件中的操作中删除leaveRoom组件中的项目？
3. 如果没有：我应该如何实现？我想把责任分开。

Answer 1

  

  
1. 这是正确的方法吗？
  

是的，确实如此。但是你必须在组件名称中使用连字符，因此user组件应该是这样的：user-component。

  

如果是：如何从users-list组件中删除项目   子用户组件内部的一个动作（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的{​​{1}}行动：

user-component

{{model.name}} - <button {{action 'leaveRoom' model}}>Leave room</button> 中的操作leaveRoom调用从user-component传递给组件的操作。因此，users-list中的leaveRoom如下所示：

user-component