javascript - Ember.js 异步对象参数

Question

我在使用 Ember.js 和异步加载资源时遇到一些问题(又名我不知道我在做什么)。这就是我所拥有的。目前它在收到数据后不会更新 list 参数。该模板不渲染任何内容。感谢您的帮助。

实用程序

import Ember from 'ember';

export var page = Ember.Object.extend({
  type: null,

  list: Ember.computed('type', function() {
    var type = this.get('type');
    var url = "/test/" + type + "/test2";

    if (type) {
      getArray(url).then(function(list) {
        return list;
      });
    } else {
      return [];
    }
  })
});

export function get(url) {
  return Ember.$.ajax({
    url: url,
    type: 'GET',
        dataType: 'text',
        cache: true,
    xhrFields: {
         withCredentials: true
    }
  });
}

export function getArray(url) {
  return get(url).then(
    function(file) {
      var array = file.split("\n");
      array.pop();
      return array;
    },
    function() {
      return ["Error!"];
    }
  );
}

路线

import util from 'app/utils/utilities';

export default Ember.Route.extend({
  model(params) {
    var p = util.page.create({
      type: params.log_type
    });

    return p;
  }
});

模板

{{#each model.list as |item|}}
  <li><a href="{{item}}">{{item}}</a></li>
{{/each}}

Answer 1

考虑代码的以下部分:

if (type) {
  getArray(url).then(function(list) {
    return list;
  });
} else {
  return [];
}

这不会做你想象的那样。 return list 返回 list 作为 Promise 的值，但您不会对该 Promise 执行任何操作。特别要注意的是，计算属性 list 将不会采用该值。当采用 if (type) 分支时，计算属性 list 将具有值 undefined (因为在这种情况下它不会返回任何内容) .

请记住，model 希望您返回一个 promise (至少，如果您希望它做它的事情，即等待 promise 解决，然后继续转换，然后使用调用 afterModel 和 setupController 等的 promise 的解析值)因此，不要将 list 设为计算属性，而是将其设为常规方法它返回您要使用的路线上的 model Hook 的 promise :

import Ember from 'ember';

export var page = Ember.Object.extend({
  type: null,

  list: function() {
    var type = this.get('type');
    var url = "/test/" + type + "/test2";

    if (!type) return [];
    return getArray(url);
});

然后在你的 route

import util from 'app/utils/utilities';

export default Ember.Route.extend({
  model(params) {
    var p = util.page.create({
      type: params.log_type
    });

    return p.list();
  }
});

您的模型将成为列表，因此在模板中:

{{#each model as |item|}}
  <li><a href="{{item}}">{{item}}</a></li>
{{/each}}