javascript - EmberJS - 在模板填充数据之前 promise 未解决

Question

我正在使用 EmberJS 和 Ember Data(最新测试版)为 Sharepoint 2013 创建一个应用程序。 Sharepoint 使用 oData/RESTfull 服务。我已经为我使用的模型创建了一个适配器。但我无法解决以下问题:

App.User = DS.Model.extend({
    Email: DS.attr('string'),
    Title: DS.attr('string')
});

App.PIF = DS.Model.extend({
    Title: DS.attr('string'),
    GUID: DS.attr('string'),
    AuthorId: DS.belongsTo('user', { async: true})
});

我有这两个模型，正如您所看到的，AuthorId 是异步加载的用户。当我尝试显示authorId 的标题时，该值不会显示，当我记录它时，它是未定义的。当我只显示authorID 时，它会返回一个 promise 。我的猜测是，当创建模板并注入(inject)数据时， promise 并未得到解决。

模板脚本:

    <script type="text/x-handlebars" id="index">
    <ul>
    {{#each item in model}}
        {{log item.AuthorId}}
        <li>{{item.Title}} Author: {{item.AuthorId.Title}}</li>
    {{/each}}
    </ul>
  </script>

当我只显示authorId而不显示用户的属性时呈现。

Test1 Author: <DS.PromiseObject:ember412>
Test2 Author: <DS.PromiseObject:ember414>
Test3 Author: <DS.PromiseObject:ember416>
test 4 Author: <DS.PromiseObject:ember418>

适配器代码是:

App.UserAdapter = App.OdataAdapter.extend({
    findAll: function () {
        return this.ajax("../../_api/web/siteusers", "get");
    },
    find: function (store, type, id, record) {
        return this.ajax("../../_api/web/getuserbyid("+ id +")", "get");
    }
});

App.PIFAdapter = App.OdataAdapter.extend({
    findAll: function () {
        return this.ajax("../../_api/web/lists/GetById(guid'e6a89c0b-3b24-4c53-9978-3d3e7ae3f392')/Items", "get");
    }
});

我的问题是，我是否正确以及如何解决它。

Answer 1

问题是 PromiseObject 在渲染到 DOM 之前填充模板之前不会解析。

我找到的解决方案是创建一个帮助器来解决 Promise，然后将其返回给 Handlebars。

由于您的 AuthorId 对象实际上是 User 对象，而不仅仅是 ID 值，因此您可以将模型重构为如下所示:

# ./app/scripts/models/user.js

App.User = DS.Model.extend({
    email: DS.attr('string'),
    title: DS.attr('string')
});

# ./app/scripts/models/pif.js

App.Pif = DS.Model.extend({
    title: DS.attr('string'),
    guid: DS.attr('string'),
    author: DS.belongsTo('user', { async: true})
});

为了符合命名约定，我还鼓励使用小写属性名称。

现在您可以创建一个如下所示的助手(在 CoffeeScript 中):

# ./app/scripts/helpers/author-name.coffee

authorName = (value) ->
  # `value` is whatever you pass through from the template. In this case, it'll be the pif model object.

  # This needs to be a string.
  _authorId = value._data.author_id.toString()

  _authorName = @get('users').findBy('id', _authorId).get('title')

  return _authorName

AuthorNameHelper = Ember.Handlebars.makeBoundHelper authorName

App.register('helper:author-name', AuthorNameHelper)

现在您已经在 Handlebars 中注册了这个帮助程序(您确实需要在脚本中加载的任何位置调用author-name.js(已编译)文件)，您可以在 .hbs/.handlebars 中使用该帮助程序像这样的文件:

<script type="text/x-handlebars" id="index">
  <ul>
  {{#each pif in pifs}}
      <li>{{pif.title}} Author: {{author-name pif}}</li>
  {{/each}}
  </ul>
</script>

作为关于 Ember 数据模型的简短说明:

要实现此功能，无论您如何将数据导入商店，当您的帮助程序调用它们时，this.store 都必须填充模型数据。这意味着负责索引模板的 Controller (理想情况下是 IndexController)需要能够访问模型。

要为一个 Controller 加载多个模型，您可以在 Ember.RSVP.hash 中提供它们。您的路线示例可能如下所示(同样，在 CoffeeScript 中):

# ./app/scripts/routes/index.coffee

App.IndexRoute = Ember.Route.extend
  model: ->
    return Ember.RSVP.hash
      users: @store.find('user')
      pifs: @store.find('pif')

--
如果我的解决方案不起作用，您可以尝试在这里查看:Rendering resolved promise value in Ember handlebars template

该解决方案对我不起作用，因为 this 无法访问其他模型。 YMMV--其他人找到了可行的答案。