ember.js - 通过 Controller 上的操作设置 belongsTo 属性不起作用

Question

我有以下型号，客户:

App.Customer = DS.Model.extend({
    //Other Attributes
    area: DS.belongsTo('area', {async: true})
});

和区域模型 -

App.Area = DS.Model.extend({
    name: DS.attr('string'),
    zip_code: DS.attr('number')
});

我使用 Ember.Select View 显示客户所在区域的下拉列表 -

{{view Ember.Select viewName="select_area" content=possible_areas optionValuePath="content.id" optionLabelPath="content.name" value=area.id prompt="No area selected" selectionBinding="selected_area"}}

以及将所有东西连接在一起的 Controller -

App.CustomerController = Ember.ObjectController.extend({
    possible_areas: function() {
        return this.store.find('area');
    }.property(),

    selected_area: null,
    actions: {
        save: function() {
            var selected_area_id = this.get('selected_area.id');
            console.log(selected_area_id);
            var selected_area = this.store.find('area', selected_area_id);
            var self = this;
            selected_area.then(function(area) {
                console.log(area.get('id'));
                var updated_customer = self.get('model');
                updated_customer.set('area', area );
                console.log(new_customer.get('area.id'));
                updated_customer.save()
                    .then(function(customer) {
                        //success
                    },
                    function() {
                        //failure
                    });
            });
        }
    }
});

现在这是奇怪的事情。第一次调用“保存”操作时， updated_customer.set('area', area ); 行失败并出现错误

Uncaught Error: Assertion Failed: Cannot delegate set('id', ) to the 'content' property of object proxy <DS.PromiseObject:ember551>: its 'content' is undefined.

之后立即调用“保存”操作，保存过程没有任何错误，并且客户区域已成功更新。尽管下拉菜单显示 selected_area 为空。

如何防止第一次保存出错？

我正在使用 ember-data 1.0.0-beta.6。

Answer 1

由于您在 Customer 中定义了关联。模型，我会删除 selected_area来自 Controller 的属性，并改用 ember-data 的关联。绑定(bind)到 Ember.Select 中的“区域”关联通过使用 selectionBinding属性(property)。

{{view Ember.Select viewName="select_area"
                    content=possible_areas
                    optionValuePath="content.id"
                    optionLabelPath="content.name"
                    prompt="No area selected"
                    selectionBinding="area"}}

这样， area当用户与选择菜单交互时，属性将发生变化。

这具有清理您的 save 的额外好处。操作，因为我们直接绑定(bind)到 area Customer 的协会.

App.CustomerController = Ember.ObjectController.extend({
  possible_areas: function() {
    return this.store.find('area');
  },

  actions: {
    save: function() {
      this.get('model').save().then(this.onDidCreate.bind(this), this.onDidFail.bind(this))      
    }

    onDidCreate: function() {
      // Fullfilled callback
    }

    onDidFail: function() {
      // Rejected callback
    }
  }
});

但是， possible_areas自 this.get('area') 以来模板首次呈现时不会填充属性返回一个 promise 。我会等待呈现选择，直到 promise 解决。您可以在路线 model 中执行此操作钩子(Hook)，因为它等到 promise 解决渲染模板。

App.CustomerRoute = Ember.Route.extend({
  route: function(params) {
    return Ember.RSVP.hash({
      customer: this.store.find('customer', params.customer_id),
      possible_areas: this.store.find('area')
    });
  },

  // Since the route hook returns a hash of (hopefully) settled promises, we
  // have to set the model property here, as well as the possible_areas property.
  setupController: function(controller, model) {
    controller.set('model', model.customer);
    controller.set('possible_areas', model.possible_areas);
  }
});