Ember.js-模型find(）方法中的异步调用

Ember.js - Asyncronous call in model find() method

本文关键字：异步 调用 方法 js- 模型 find Ember      更新时间：2023-09-26

我已经在Property模型上实现了find()和findAll()方法。两种方法都对API进行异步调用。findAll()在连接回家路线的插座时被调用，工作正常。在连接我的财产路由的出口时，Ember.js调用了find()。请注意，当通过操作导航到属性路由时，不会调用find()，但当通过URL直接转到路由时，会调用它。

这是我的路由器：

App.Router = Ember.Router.extend({
    root: Ember.Route.extend({
        showProperty: Ember.Route.transitionTo('property'),
        home: Ember.Route.extend({
            route: '/',
            connectOutlets: function(router) {
                router.get('applicationController').connectOutlet('home', App.Property.findAll());
            }        
        }),
        property: Ember.Route.extend({
            route: '/property/:property_id',
            connectOutlets: function(router, property) {
                router.get('applicationController').connectOutlet('property', property);
            }
        }),
    })
});

这是我的findAll()和find()方法：

App.Property.reopenClass({
    find: function(id) {
        var property = {};
        $.getJSON('/api/v1/property/' + id, function(data) {
            property = App.Property.create(data.property);
        });
        return property;
    },
    findAll: function() {
        var properties = [];
        $.getJSON('/api/v1/properties', function(data) {
            data.properties.forEach(function(item) {
                properties.pushObject(App.Property.create(item));
            });
        });
        return properties;
    }
});

当我转到索引以外的路由时，例如http://app.tld/#/property/1，该路由将被重写为http://app.tld/#/property/undefined。没有向property控制器的content属性传递任何内容。如何在find()方法中进行异步调用？除非我弄错了，否则异步调用在findAll()方法中运行良好，这是我感到困惑的原因。

这个问题类似于使用异步回调的反序列化，但我使用的是find()方法，而不是重写deserialize()方法。

提前谢谢。

我发现设置id属性显式地解决了这个问题。在你的情况下，这看起来是这样的。

find: function(id) {
  var user = App.User.create();
  $.getJSON('/api/v1/property/' + id, function(data) {
    user.setProperties(data.user)
  });
  user.set("id",id); // <-- THIS
  return user;
}

一旦user获得其属性集，视图将正常更新。Ember只需要之前的id部分就可以更新URL。

希望这有帮助：-）

以下是您想要做的事情。我把模型改成了User，让事情变得更清楚一些。

在find()的情况下，您返回一个空白的模型实例，当AJAX请求返回时，该实例将填充其属性。Ember数据绑定的好处是，您可以立即在视图中显示该模型，并且当AJAX请求返回并更新模型实例时，视图将更新。

在findAll()的情况下，返回一个空白数组，当AJAX请求返回时，该数组将被填充。与find()相同，您可以在视图中显示此模型列表（最初为空），当AJAX请求返回并填充数组时，视图将更新。

App.User.reopenClass({
  find: function(id) {
    var user = App.User.create();
    $.getJSON('/api/v1/property/' + id, function(data) {
      user.setProperties(data.user)
    });
    return user;
  },
  findAll: function() {
    var userList = [];
    $.getJSON('/api/v1/properties', function(data) {
      var users = data.users.map(function(userData) {
        return App.User.create(userData);
      });
      userList.pushObjects(users);
    });
    return userList;
  }
});
相关文章：