我发现我正试图在一个特别波动的时候学习余烬。 最近的"通往 2.0 之路"博客文章帮助我明确了前进的方向，但我正在努力在高层次上验证我对 Ember 的方法。
我想对人们的时间保持敏感。 我的完整代码在这里供任何有兴趣提供更具体反馈的人使用(会喜欢)，但我最感兴趣的是关于我的应用程序结构和我对 Ember 功能的利用的高级反馈。
应用背景：
我正在开发一个用户对多聊天到短信应用程序。 在视觉上，每个用户有多个聊天窗口(一个Conversation)打开，带有特定于Profile消息历史记录的消息(Message)。支持的导轨将消息发送到目标Profile。这个项目正在开发中。
关键问题：
- 将模型与组件关联的最佳方式是什么？我将每个对话模型传递给对话组件。随着我的组件逻辑与视图紧密集成，tt 似乎组件类在 UI 之外承担了太多的重量。 我开始添加有关UI如何冒泡到模型的逻辑，但想知道是否有更好的方法。
- 由于我正在摆脱 Array 控制器的代理行为，我发现自己通过
this.get('content')引用我的模型集合 - 有没有更好的方法来处理对话集合？ - 最后，为了调用组件中的操作，我已经阅读了使用 mixin 来触发和观察事件
Ember.Evented。 即当用户尝试在聊天已经打开的情况下打开个人资料的聊天窗口时，我想闪烁目标聊天窗口。 这是在"通往 2.0 之路"的背景下管理这些交互的好方法吗？ - 如何将事件从控制器传递到
Message子组件？消息子组件将绑定到每个消息的状态(成功、失败等)。我想我只是将一些消息显示绑定到记录的状态和状态属性。有什么办法可以做得更好吗？
我非常乐于接受反馈。 苛刻！ :)
高级代码：
(完整代码)
ChatApp.Router.map(function () {
this.resource('conversations', { path: '/' });
});
ChatApp.ConversationsRoute = Ember.Route.extend({
model: function () { //this is a collection of active conversations
},
activate: function() { //listens to event stream
}
});
ChatApp.ConversationsController = Ember.Controller.extend({
actions: {
openChat: function(user_id, profile_id){ //open chat if one isn't open.
}
},
removeExcessChats: function(){ // removes chats that don't fit in window
},
});
ChatApp.ConversationHolderComponent = Ember.Component.extend({
actions: {
markInactive: function(){
// referencing a passed in conversation is the only way I know to reference the model.
this.get('conversation').markInactive();
},
createMessage: function(){
}
},
isFlashed: false
});
组件模板：
<script type="text/x-handlebars" data-template-name="components/conversation-holder">
<button {{action "markInactive"}}>close</button>
<h3>Profile: {{conversation.profile}} Conversation: {{conversation.id}}</h3>
<ul class="list-unstyled">
{{#each message in conversation.messages}}
<li><strong>{{message.type}}</strong> {{message.body}}</li>
{{/each}}
<li>
<form class="form-inline" {{action "createMessage" on="submit"}}>
{{input class="message_body" placeholder="Start typing a message..." value=conversation.new_message_body type="text"}}
{{input class="btn" type="submit" value="Send"}}
</form>
</li>
</ul>
</script>
<script type="text/x-handlebars" data-template-name="conversations">
<section id="todoapp">
<header id="header">
<h1>Chat Messaging</h1>
</header>
</section>
<section id="main">
<p>Open a new chat with profile id #1 <a href="#" {{action "openChat" 1 1}} >Open w/ profile 1</a> | <a href="#" {{action "openChat" 1 6}} >open profile already in convo</a></p>
<ul id="chat-app" class="list-unstyled clearfix">
{{#each conversation in model}}
<li>{{chat-holder conversation=conversation}}</li>
{{/each}}
</ul>
</section>
</script>
我没有浏览您的应用程序设计，但我是根据您提到的更一般的 Ember 概念来回答的。
1.
Ember 中实际上没有模型对象。您有一条带有模型挂钩的路由，该钩子返回您想要的任何模型。它可以是一个字符串、数组或只是一个数字。
当您使用 Ember Data时，会发生的情况是模型挂钩返回 Ember Data 对象。
组件可以接收任何对象作为其模型/内容。因此，没有最好或最差的方式来关联模型和组件，您只需传递它所需的内容即可。
阿拉伯数字。
如果您的组件开始变得太大，您可能应该将其拆分为两个或多个组件。让组件的模板呈现其他组件并没有错。
此外，如果您有在许多组件之间共享的逻辑，则可以将其重构为 mixin 并将其包含在每个组件中。
3.
您在控制器和组件之间传递消息的想法*可能*是正确的。Ember 应用程序中的通常流程是事件向上和数据向下。由于控制器的级别高于组件，因此无法在该方向上发送事件，但通过更新绑定值，可以将新信息传递给组件。