ember.js - name - ember onclick

Road to Ember 2.0: comentarios sobre la estructura de aplicaciones de alto nivel de Ember

Question

Me parece que estoy tratando de aprender Ember en un momento de particular fluctuación. La reciente publicación de blog "Road to 2.0" me ayudó a aclarar qué dirección tomar, pero estoy luchando para validar mi enfoque de Ember a un alto nivel.

Quiero ser sensible al tiempo de las personas. Mi código completo está aquí para cualquier persona interesada en proporcionar comentarios más específicos (me encantaría), pero estoy más que interesado en este comentario de alto nivel sobre la estructuración de mi aplicación y mi utilización de las capacidades de Ember.

Aplicación de fondo:

Estoy trabajando en una aplicación de chat de texto a usuario de muchos usuarios. Visualmente, cada usuario tiene múltiples ventanas de chat (una Conversation ) abiertas con mensajes ( Message ) específicos del historial de mensajes de Profile . Los raíles respaldados envían mensajes al Profile destino. Este proyecto está muy en desarrollo.

Preguntas clave:

• ¿Cuál es la mejor manera de asociar un modelo con un componente? Paso cada modelo de conversación a un componente de conversación. Como mi lógica de componentes se integra tan estrechamente a la vista, parece que una clase de componentes está tomando demasiado peso fuera de la interfaz de usuario. Estoy empezando a agregar lógica sobre cómo la interfaz de usuario sube hasta el modelo, pero me pregunto si hay mejores enfoques.
• Dado que me estoy alejando del comportamiento de proxys del controlador Array, me encuentro haciendo referencia a mi colección de modelos a través de this.get(''content'') : ¿hay una mejor manera de manejar la colección de conversaciones?
• Finalmente, para invocar acciones en un componente, he leído sobre usar Ember.Evented mixin para activar y observar eventos. Es decir, cuando un usuario intenta abrir una ventana de chat para un perfil cuando ese chat ya está abierto, me gustaría mostrar la ventana de chat objetivo. ¿Es esta una buena forma de gestionar estas interacciones en el contexto de "Road to 2.0"?
• ¿Qué pasa con pasar eventos del controlador a los subcomponentes del Message ? Los subcomponentes de mensajes estarían vinculados a los estados de cada mensaje (éxito, error, etc.). Imagino que simplemente vincularía una pantalla de mensajes al estado de estado y estado de un registro. ¿De alguna manera podría hacerlo mejor?

Estoy súper abierto a los comentarios. Se duro! :)

Código de alto nivel:

( código completo )

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

Plantillas de componentes:

<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>

Answer 1

No revisé el diseño de su aplicación, pero estoy respondiendo según los conceptos generales de Ember que mencionó.

1.

Realmente no hay un objeto modelo en Ember. Tienes una ruta con un gancho modelo que devuelve lo que quieras como tu modelo . Puede ser una cadena, una matriz o simplemente un número.

Cuando usa Ember Data, lo que sucederá es que el gancho del modelo devuelve objetos Ember Data.

Un componente puede recibir cualquier objeto como su modelo / contenido. Por lo tanto, no existe la mejor o la peor forma de asociar un modelo y componente, solo le pasa lo que necesita.

2.

Si su componente comienza a ser demasiado grande, probablemente deba dividirlo en dos o más componentes. No tiene nada de malo que la plantilla de un componente represente otros componentes.

Además, si tiene una lógica que se comparte entre muchos componentes, puede refactorizarla en un mixin e incluirla en cada componente.

3.

Su idea para pasar mensajes entre el controlador y los componentes es * probablemente * correcto. El flujo habitual en las aplicaciones Ember es eventos arriba y datos abajo. Como el controlador está en un nivel más alto que un componente, no puede enviar el evento en esa dirección, pero al actualizar los valores encuadernados, puede pasar información nueva a los componentes.