Ember.js与Socket.io

我试图在我的节点应用程序视图中实现一个简单的Ember应用程序。 我知道Ember设置和我的套接字工作正常,现在唯一的问题是数据似乎没有被返回,即使它被检索。

这是我有什么:

App = Ember.Application.create({ rootElement: '#ember' }); App.Router.map(function() { // put your routes here }); App.IndexRoute = Ember.Route.extend({ model: function() { async.waterfall([ function (callback) { socket.emit('getUserList', { data: null }); callback(null, ''); }, function (res, callback) { var userList = new Array(); socket.on('recieveUserList', function (data) { for(var i=0; i<data.userList.length; i++) { userList.push(data.userList[i].name); } }); callback(null, userList); } ], function (err, result) { return result; }); } }); 

现在,如果我console.log(results)我回来了''约翰·史密斯','珍',但它不打印在我的网页上:

 <script type="text/x-handlebars"> <ul> {{#each item in model}} <li>{{item}}</li> {{/each}} </ul> </script> 

从看例子它应该工作,对吗?

编辑这里是小提琴http://jsfiddle.net/UJ4Su/

       

网上收集的解决方案 "Ember.js与Socket.io"

修理你的小提琴

在你看来试试这个:

 <script type="text/x-handlebars" data-template-name="index"> <ul> {{#each item in model}} <li>{{item}}</li> {{/each}} </ul> </script> 

(注意这个模板的索引路由的显式引用)

这是你的小提琴的更新版本正在工作:

示例: http : //jsfiddle.net/UJ4Su/13/

请注意,这个例子不适用于你的套接字,因为你没有返回一个承诺。 既然你正在返回一个正常的数组(因为你没有在你的asynchronous套接字调用之外没有返callback用,所以你没有返回任何东西),Ember期望数据立即到达那里。 看下面如何解决这个问题。

处理您的路由第1部分中的asynchronous呼叫

由于您正在进行asynchronous调用来填充用户列表,您将需要先返回一个空的用户列表,然后在您的套接字事件parsing时填充它。 下面是一个演示这个使用setTimeout来模拟套接字调用的asynchronous性质的小提琴:

 App.IndexRoute = Ember.Route.extend({ model: function(){ var data = Ember.A(); window.setTimeout(function(){ data.pushObject('a'); data.pushObject('b'); data.pushObject('c'); }, 1000); return data; } }); 

您还需要使用Ember Array(与原生JavaScript数组相比),以便Ember可以观察arrays上的更改并为您更新模板。

例如: http : //jsfiddle.net/UJ4Su/7/

(有关在Ember中利用asynchronous路由的更多信息,请参阅此页面: http : //emberjs.com/guides/routing/asynchronous-routing/ )

利用Ember.Deferred或Ember.RSVP的优势

以上是非常简单的,但如果你想要更多的优势,我build议直接使用Ember.Deferred或RSVP承诺。 Ember.Deferred是一个简单的mixin,用作一些RSVPfunction(特别是then(),resolve()和reject())的封装。 这里是一个使用Deferred的例子:

 App.IndexRoute = Ember.Route.extend({ model: function(){ var deferredData = Ember.Deferred.create(); var data = []; window.setTimeout(function(){ data.push('a'); data.push('b'); data.push('c'); deferredData.resolve(data); }, 3000); return deferredData; }, actions: { loading: function(transition, originalRoute){ return true; } } }); 

基本上我们返回一个Ember.Deferred而不是Ember Array。 在Deferred解决之前,Ember将转换到加载状态。 您可以在检索数据时(通过套接字或AJAX)向用户显示加载数据消息。 这里有一个工作小提琴的例子:

示例: http : //jsfiddle.net/UJ4Su/10/

这里是一个使用Ember承诺的例子:

例如: http : //jsfiddle.net/UJ4Su/12/

有关加载/错误子状态的更多信息可以在这里find: http : //emberjs.com/guides/routing/loading-and-error-substates/

希望有所帮助!

2016年实际情况:

使用ember-websockets

它执行所有你需要的框。