ember.js - 当我期望它是时，Ember promise 没有解决

Question

我有一个需要数据而不是 promise 的自定义组件，但我不确定他们获取数据的方式是否正确。

这是正确的方法吗？

组分 hbs

{{x-dropdown content=salutations valuePath="id" labelPath="description" action="selectSalutation"}}

不工作

Controller (这是我期望的工作方式

import Ember from 'ember';

export default Ember.Controller.extend({

  bindSalutations: function() {
    var self = this;
    this.store.find('salutation').then(function(data) {
      self.set('salutations', data);
    });
  }.on('init'),

组件/x-dropdown.js

import Ember from 'ember';

export default Ember.Component.extend({
  list: function() {
    var content   = this.get('content');
    var valuePath = this.get('valuePath');
    var labelPath = this.get('labelPath');

    return content.map(function(item) {
      return {
        key:   item[labelPath],
        value: item[valuePath],
      };
    });
  }.property('content'),

这有效

Controller

bindSalutations: function() {
  var self = this;
  this.store.find('salutation').then(function(data) {
    self.set('salutations', data.get('content'));   // pass the content instead of just the data
  });
}.on('init'),

零件

...

  list: function() {
    var content   = this.get('content');
    var valuePath = this.get('valuePath');
    var labelPath = this.get('labelPath');

    return content.map(function(item) {
      return {
        key:   item._data[labelPath],     // access through the _data attribute
        value: item._data[valuePath],
      };
    });
  }.property('content'),

Answer 1

Ember Data 返回一个代理 promise 。这意味着您可以将 Promise 用作集合或模型本身，只要您不依赖于在使用它时完全填充的属性。如果你真的想要解决这个 promise ，你可能应该在路由中设置它。

如果你想在你的 Controller 上使用它，你可以偷懒，像这样:

Controller

salutations: function() {
  this.store.find('salutation');
}.property(),

零件

...

  list: function() {
    var content   = this.get('content'),
        valuePath = this.get('valuePath'),
        labelPath = this.get('labelPath');

    return content.map(function(item) {
      return {
        key:   item.get(labelPath), 
        value: item.get(valuePath),
      };
    });
  }.property('content.[]'),

模板

{{x-dropdown content=salutations valuePath="id" labelPath="description" action="selectSalutation"}}

真正的诀窍是观察收藏是否发生变化。因此您会看到我将属性参数更改为 content.[]