有一个用 Ember.js 编写的简单消息应用程序。看看这个小提琴（没有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 为您实例化所有路由和视图/控制器时，这可能吗？消息应该存储在哪里？
编辑：说清楚。我希望消息持续存在，但我想为每个联系人分开流。