javascript - 带有 Socket.io 的 Ember.js

Question

我正在尝试在我的 Node 应用程序 View 中实现一个简单的 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) 我会返回 ['John Smith', 'Jane Doe'] 但它不会打印在我的页面上:

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

从示例来看，它应该可以工作，对吧？

编辑这是 fiddle http://jsfiddle.net/UJ4Su/

Answer 1

修复你的 fiddle

在你看来试试这个:

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

(注意此模板对索引路由的显式引用)

这是你的 fiddle 的更新版本:

EXAMPLE: http://jsfiddle.net/UJ4Su/13/

请注意，此示例不适用于您的套接字，因为您没有返回 promise 。由于您正在返回一个普通数组(从技术上讲，您什么也没有返回，因为您在异步套接字调用之外没有返回调用)，Ember 希望数据立即存在。请参阅下文了解如何解决此问题。

在路由第 1 部分中处理异步调用

由于您正在进行异步调用来填充用户列表，因此您需要先返回一个空的用户列表，然后在您的套接字事件解析时填充它。这是一个使用 setTimeout 模拟套接字调用的异步性质的 fiddle :

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 数组(相对于原生 Javascript 数组)，以便 Ember 可以观察数组的变化并为您更新模板。

EXAMPLE: http://jsfiddle.net/UJ4Su/7/

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

利用 Ember.Deferred 或 Ember.RSVP

上面的内容非常简单，但如果您想更多地利用 Ember，那么我建议您直接使用 Ember.Deferred 或 RSVP Promises。 Ember.Deferred 是一个简单的 mixin，充当一些 RSVP 功能(特别是 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 数组。在 Deferred 被解决之前，Ember 将转换为加载状态。然后，您可以在检索数据时向用户显示加载数据消息(通过套接字或 AJAX)。这是一个有效的 fiddle 示例:

EXAMPLE: http://jsfiddle.net/UJ4Su/10/

这是一个使用 Ember Promises 的例子:

EXAMPLE: http://jsfiddle.net/UJ4Su/12/

有关加载/错误子状态的更多信息可在此处找到:http://emberjs.com/guides/routing/loading-and-error-substates/

希望对您有所帮助!