如何设置Ember-CLI belongsTo下拉列表?

时间:2015-07-27 03:58:35

标签: javascript ember.js ember-data ember-cli

我在使用Ember Data在Ember-CLI中保存belongsTo关系时遇到问题。我有一个属于contact模型的client模型。以下是模型:

// models/contact.js

import DS from 'ember-data';

var Contact = DS.Model.extend({
    firstName: DS.attr('string'),
    lastName: DS.attr('string'),
    title: DS.attr('string'),
    email: DS.attr('string'),
    phone: DS.attr('string'),
    client: DS.belongsTo('client', {async: true}),
});


export default Contact;


// models/client.js
import DS from 'ember-data';

var Client = DS.Model.extend({
    name: DS.attr('string'),
    phone: DS.attr('string'),
    email: DS.attr('string'),
    summary: DS.attr('string'),
    contacts: DS.hasMany('contact', {async: true}), 
});

export default Client;

这是我的模板:

<form {{action "save" on="submit"}}>

{{view "select" 
        contentBinding=model.client
        optionLabelPath="content.name"
        optionValuePath="content.id"
        selectionBinding="contact.client.content" }}
  <div>
    <label>
      First name
      {{input type="text" value=model.firstName}}
    </label>
  </div>
  <div>
    <label>
      Last name
      {{input type="text" value=model.lastName}}
    </label>
  </div>
  <div>
    <label>
      Title
      {{input type="text" value=model.title}}
    </label>
  </div>
  <div>
    <label>
      Email
      {{input type="text" value=model.email}}
    </label>
  </div>
  <div>
    <label>
      Phone
      {{input type="text" value=model.phone}}
    </label>
  </div>
  <div>
    <input type="submit" value="Save">
  </div>
</form>

这是此型号的保存mixin:

import Ember from 'ember';

export default Ember.Mixin.create({
  actions: {
    save: function() {
      var route = this;
      var client = this.client;
      console.log(client)
      this.currentModel.save('contact', {client: client}).then(function() {
        route.transitionTo('contacts');
      }, function() {
        console.log('Failed to save the model');
      });
    }
  },
  deactivate: function() {
    if (this.currentModel.get('isNew')) {
      this.currentModel.deleteRecord();
    } else {
      this.currentModel.rollback();
    }
  }
});

我目前从undefined获得console.log(client),从后续行获得Uncaught TypeError: this.currentModel.save is not a function

我可以告诉您,我在选择client从下拉菜单传递给保存mixin时遇到问题......

非常感谢任何帮助/想法!

1 个答案:

答案 0 :(得分:0)

这是我最终做的...我为这个函数创建了一个视图,如下所示:

import Ember from 'ember';

    export default Ember.Route.extend( {
      selectedClient: [],
      afterModel : function() {
        var _this = this;
        return this.store.find('client').then(function(result) {
          _this.set('selectedClient', result);
        });
      },
      model : function() {
        return this.store.createRecord('contact');
      },
      setupController: function(controller, model) {
        this._super(controller, model);
        controller.set('clients', this.get('selectedClient'));
      }
    });

我必须将保存功能移动到控制器:

    //contacts/new.js
import Ember from 'ember';

export default Ember.ObjectController.extend({
    selectedClient: [],
    actions: {
      save: function() {
        var route = this;
        var client = this.get('client');
        // console.log(this.get('client').get('id'));
        this.model.set('client', client).save().then(function() {
          route.transitionTo('contacts');
        }, function() {
          console.log('Failed to save the model');
        });
      }
    },
    deactivate: function() {
      if (this.currentModel.get('isNew')) {
        this.currentModel.deleteRecord();
      } else {
        this.currentModel.rollback();
      }
    }
});

注意更新的保存功能...我必须添加.set('client', client)才能在保存联系人之前实际分配关系。

以下是一些有助于我找到有效解决方案的链接: http://jsbin.com/kopagacezi/21/edit?html,js,output

http://discuss.emberjs.com/t/update-belongsto-relation-from-dropdown-ember-select-view/7609

现在全部启动并运行。