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

有一个简单的消息应用程序是用Ember.js编写的。看看它（没有CSS，对不起）

/**************************
*应用
**************************/
App=Ember.Application.create({
//根元素：“#app_body”
});
/**************************
*模型
**************************/
App.Person=Ember.Object.extend({
id:null，
名称：空，
阿凡达：空，
jid:null
})
App.Contact=App.Person.extend({
isOnline:错误
});
App.Message=Ember.Object.extend({
from:null，
//至：空，
文本：空
//时间：空
});
/**************************
*观点
**************************/
App.ApplicationView=Ember.View.extend({
templateName:“应用程序”
});
App.ContactListView=Ember.View.extend({
templateName:“联系人列表”
});
App.ContactView=Ember.View.extend({
templateName:“联系人”
});
App.TextView=Ember.View.extend({
templateName:'文本'，
新消息：“”，
信息：[]，
提交：功能（事件）{
var message_body=this.get（'newMessage'）
var message=App.message.create({
发件人：App.me.name，
至：空，
文本：消息体，
时间：空
});
this.get（'messages'）.pushObject（message）；
}
});
App.ConversationView=Ember.View.extend({
templateName:“对话”
});
/**************************
*控制器
**************************/
App.contactsController=Ember.ArrayController.create({
内容：[]，
pair:function（）{
content=this.get（'content'）；
var结果=[]；
对于（ii=0；ii

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

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

---

编辑：使其清晰。我希望消息保持不变，但我希望将每个联系人的消息流分开。

根据您所说的

每个联系人都应该有自己的“消息队列”。

，我已将消息存储在联系人本身中。由于每次调用connectOutlet（）时都会实例化视图，因此必须将数据持久化到模型中

在你的情况下，这些信息混合在一起是因为你感觉自己变成了灰烬。实际上，当您扩展一个类并将一个属性声明为空数组时，该数组将在所有实例之间共享。这样做的好方法是在init（）方法中初始化空数组

这是我的JSFIDLE，我希望这能有所帮助

---

1000th ember.js问题！某种庆祝活动似乎被称为forThanks，你帮了我很多！我还有一个关于这个例子的问题。当我收到消息时（例如来自Y）

/**************************
       * 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();
});