道路到Ember 2.0 - 高级Ember应用程序结构反馈？ [英] Road to Ember 2.0 - High level Ember app structure feedback?

问题描述

我发现我正在尝试在特定波动的时候接受学习Ember。最近的2.0路博客已经帮助我澄清了要走向哪个方向，但我正在努力验证我在高层次的Ember方法。

I find I'm trying to pick up learning Ember at a time of particular fluctuation. The recent "Road to 2.0" blog post has helped me clarify which direction to head, but I'm struggling to validate my approach to Ember at a high level.

我想要对人们的时间敏感。我的完整代码适用于任何有兴趣提供更具体反馈意见（愿意）的人，但我最感兴趣的是关于我的应用程序结构和Ember功能的使用的高级反馈。

I want to be sensitive to people's time. My full code is here for anyone interested in providing more specific feedback (would love), but I'm mostly interested in this high level feedback on my app's structuring and my utilization of Ember's capabilities.

我正在为文本短信应用进行一个用户到多个聊天。视觉上，每个用户都有多个聊天窗口（一个对话）打开w /消息（消息），具体针对个人资料消息历史记录。支持的导轨将消息发送到目标配置文件。这个项目非常发达。

I'm working on a user-to-many chat to text SMS app. Visually, each user has multiple chat windows (a Conversation) open w/ messages (Message) specific to a Profile message history. The rails backed sends messages to the target Profile. This project is very much in development.

• 什么是将模型与组件相关联的最佳方式？我将每个会话模型传递给会话组件。由于我的组件逻辑变得如此紧密地集成到视图中，似乎组件类在UI之外占有太多的空间。我开始添加关于UI泡沫到模型的逻辑，但是想知道是否有更好的方法。


• 由于我摆脱了Array控制器的代理行为，我发现自己通过 this.get（'content'）引用我的模型集合 - 有没有更好的方法来处理对话集合？


• 最后，要调用组件中的操作，我已经阅读过使用 Ember.Evented mixin来触发和观察事件。即当用户尝试在该聊天已经打开时为配置文件打开聊天窗口时，我想要闪烁目标聊天窗口。这是在路到2.0的背景下管理这些交互的好方法吗？


• 将控制器的事件传递到消息子组件？消息子组件将绑定到每个消息的状态（成功，失败等）。我想我只是将一些消息显示绑定到记录的状态和状态属性。任何方式我可以做得更好？

• What is the best way to associate a model with a component? I'm passing each conversation model to a conversation component. As my component logic becomes so tightly integrated to the view, tt seems like a component class is taking on too much heft outside of UI. I'm starting to add of logic around how UI bubbles up to the model, but wonder if there are better approaches.
• Since I'm breaking away from the proxying behavior of Array controller, I find myself referencing my model collection via this.get('content') - is there a better way to deal with the collection of conversations?
• Finally, to invoke actions in a component, I've read of using Ember.Evented mixin to trigger and observe events. I.e. when a user tries to open a chat window for a profile when that chat is already open, I'd want to flash the target chat window. Is this a good way to manage these interaction in context of "Road to 2.0"?
• What about passing events from the controller to the Message subcomponents? Message subcomponents would be bound to each messages' statuses (success, fail, etc). I imagine i'd just bind some message display to a record's state and status attribute. Any way I could do it better?

我非常乐于反馈。要苛刻：

I'm super open to feedback. Be harsh! :)

（全部代码）

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
});

组件模板：

Component templates:

<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概念。

I didn't go through your app design, but I'm answering based on the more general Ember concepts that you mentioned.

1。

真的是Ember中的一个模型对象。您有一条路线，其中包含模型钩子，可以返回您想要的您的模型。它可以是字符串，数组或只是一个数字。

There isn't really a model object in Ember. You have a route with a model hook that returns whatever you want as your model. It can be a string, array or just a number.

当您使用Ember Data时，会发生什么是模型钩子返回Ember Data对象。

When you use Ember Data, what will happen is that the model hook returns Ember Data objects.

组件可以接收任何对象作为其模型/内容。所以，没有一个最好的或最差的方式来关联模型和组件，你只需要传递它所需要的东西。

A component can receive any object as its model/content. So, there isn't a best or worst way of associating a model and component, you just pass it what it needs.

2。

如果您的组件开始变得太大，可能您应该将其拆分成两个或多个组件。有一个组件的模板渲染其他组件没有什么问题。

If your component is starting to get too big, probably you should split it in two or more components. Nothing wrong with having a component's template render other components.

另外，如果你有许多组件之间共享的逻辑，你可以将它重构为混合，并将其包含在每个组件。

Also, if you have logic that is shared among many components, you can refactor that into a mixin and include it in each component.

3。

您在控制器和组件之间传递消息的想法是*可能*对。 Ember应用程序中的通常流程是事件和事件。数据下降。由于控制器处于比组件更高的级别，因此您无法以该方向发送事件，但通过更新绑定值，您可以将新信息传递给组件。

Your idea for message passing between the controller and the components is *probably* right. The usual flow in Ember apps is events up & data down. Since the controller is at a higher level than a component, you can't send event in that direction, but by updating bound values you can pass new info to the components.

这篇关于道路到Ember 2.0 - 高级Ember应用程序结构反馈？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！