Question

有一个用Ember.js编写的简单消息传递应用程序。在this fiddle看一下（没有CSS，抱歉）。

/**************************
       * Application
       **************************/
App = Ember.Application.create({
  //rootElement: '#app_body'
});


/**************************
       * Models
       **************************/

App.Person = Ember.Object.extend({
  id: null,
  name: null,
  avatar: null,
  jid: null
})

App.Contact = App.Person.extend({
  isOnline : false
});

App.Message = Ember.Object.extend({
  from : null,
  //    to : null,
  text : null
  //    time : null
});



/**************************
       * Views
       **************************/


App.ApplicationView = Ember.View.extend({
  templateName:'application'
});

App.ContactListView = Ember.View.extend({
  templateName: 'contact-list'
});

App.ContactView = Ember.View.extend({
  templateName: 'contact'
});

App.TextView = Ember.View.extend({
  templateName : 'text',
  newMessage : '',
  messages : [],

  submit: function(event) {
    var message_body = this.get('newMessage')
    var message = App.Message.create({
      from : App.me.name,
      to : null,
      text : message_body,
      time : null
    });
    this.get('messages').pushObject(message);
  }
});

App.ConversationView = Ember.View.extend({
  templateName: 'conversation'
});

/**************************
       * Controllers
       **************************/
App.contactsController = Ember.ArrayController.create({

  content:[],

  pair:function () {
    content = this.get('content');
    var result = [];
    for (ii = 0; ii < content.length; ii += 2) {
      result.pushObject({
        "first":content[ii],
        "second":content[ii + 1] ? content[ii + 1] : null
      });
    }
    return result;
  }.property('content.@each')
});

// Define the main application controller. This is automatically picked up by
// the application and initialized.
App.ApplicationController = Ember.Controller.extend();

App.ConversationController = Ember.ObjectController.extend();
App.TextController = Ember.ObjectController.extend();


/**************************
       * Router
       **************************/
App.Router = Ember.Router.extend({

  enableLogging: true,

  root: Ember.Route.extend({

    goToContactList : Ember.State.transitionTo('contacts'),
    goToConversation : Ember.State.transitionTo('conversation.text'),

    index : Ember.Route.extend({
      route:'/',
      redirectsTo:"contacts"
    }),

    contacts : Ember.Route.extend({
      route:'/contacts',
      connectOutlets:function (router) {
        router.get('applicationController').connectOutlet('contactList'); // leads to ContactListView
      }
    }),

    conversation : Ember.Route.extend({

      route:'/conversation/:contact_id',
      //            modelClass: 'App.Contact',

      connectOutlets:function (router, contact) {
        // binds current contact to the conversationController so the text/video view can access it
        router.get('applicationController').connectOutlet('conversation', contact);
      },

      deserialize:function (router, params) {
        return App.contactsController.find(function(item) {
          return item.id == params.contact_id;
        });
      },

      serialize:function (router, context) {
        return context ? { contact_id : context.get('id') } : {};
      },

      index : Ember.Route.extend({
        route:'/',
        redirectsTo:"text"
      }),

      text : Ember.Route.extend({
        route:'/text',
        connectOutlets:function (router) {
          var conversationController = router.get('conversationController'),
              contact = conversationController.get('content');
          console.log(contact);
          conversationController.connectOutlet('text', contact);
        }

      })
    })
  })
});


/**************************
       * Data initialization
       **************************/

me = {"id" : 123, "name" : "Pavel"};
contacts = [
  {
    "id" : 1, 
    "name" : "Barrack Obama", 
    "avatar" : "http://www.barackobama.net/pictures/barack-obama-2.jpg"
  },
  {
    "id" : 2, 
    "name" : "Yehuda Katz", 
    "avatar" : "http://static.jquery.com/events/2011/boston/assets/images/avatars/yehuda-katz.jpg"
  }
];

// variables "me" and "contacts" are passed from the view as plain JS object
$.each(contacts, function(index, contact){
  App.contactsController.pushObject(App.Contact.create({
    "id" : contact.id,
    "name" : contact.name,
    "avatar" : contact.avatar
  }));
});

App.me = App.Person.create({
  "id" : me.id,
  "name" : me.name
});

$(function() {
  App.initialize();
});

您可以从各种联系人中进行选择并向他们发送消息。每个联系人都应该有自己的“消息队列”。

但是，在目前的情况下，所有消息都混合在一起。我试图根据上下文拆分它们，但我不知道为什么。当Ember.js为您实例化所有路由和视图/控制器时，这样的事情是否可能？消息应该存储在哪里？

编辑：说清楚。我希望邮件能够保留，但我想为每个联系人分开流。

Answer 1

根据您所说的Each contact should have its own "message queue".，我已将消息存储在联系人本身中。由于每次调用connectOutlet（）时都会实例化视图，因此必须将数据保留在模型中。

在你的情况下，混合的消息因为你感到陷入困境。实际上，当您扩展类并将属性声明为空数组时，此数组将在所有实例之间共享。执行此操作的好方法是在init（）方法中初始化空数组。

这是我的结果jsfiddle，我希望这有帮助

http://jsfiddle.net/Sly7/9jCL9/

在Ember.js应用程序中分隔对象

1 个答案: