我发现我正试图在一个特别波动的时期开始学习 Ember。最近的“Road to 2.0”博客文章帮助我明确了前进的方向，但我正在努力在高水平上验证我对 Ember 的方法。
我想对人们的时间敏感。我的完整代码适合有兴趣提供更具体反馈的任何人（很乐意），但是我最感兴趣的是关于我的应用程序结构和我对 Ember 功能的利用的高级反馈。
应用背景：
我正在开发一个用户对多聊天短信应用程序。从视觉上看，每个用户都有多个聊天窗口（一个Conversation）打开消息（Message）特定于Profile消息历史记录。支持的 Rails 向目标发送消息Profile。这个项目正在开发中。
关键问题：
- 将模型与组件关联的最佳方式是什么？我将每个对话模型传递给对话组件。随着我的组件逻辑与视图的集成如此紧密，组件类似乎在 UI 之外承担了太多的责任。我开始添加有关 UI 如何冒泡到模型的逻辑，但想知道是否有更好的方法。
- 由于我脱离了数组控制器的代理行为，我发现自己通过以下方式引用我的模型集合
this.get('content')- 有没有更好的方法来处理对话的集合？
- 最后，为了调用组件中的操作，我读过使用
Ember.Eventedmixin 来触发和观察事件。 IE。当用户尝试打开配置文件的聊天窗口且该聊天已打开时，我想闪烁目标聊天窗口。这是在“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 对象。
组件可以接收任何对象作为其模型/内容。因此，关联模型和组件没有最好或最差的方法，您只需传递它需要的东西即可。
2.
如果您的组件开始变得太大，您可能应该将其拆分为两个或更多组件。让一个组件的模板渲染其他组件并没有什么问题。
此外，如果您的逻辑在许多组件之间共享，您可以将其重构为 mixin 并将其包含在每个组件中。
3.
您在控制器和组件之间传递消息的想法“可能”是正确的。 Ember 应用程序中的通常流程是事件向上和数据向下。由于控制器的级别高于组件，因此您无法向该方向发送事件，但通过更新绑定值，您可以将新信息传递给组件。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
