Power-select 未显示 selected 值

Question

我的power-select不会显示selected值。

我在这个组件中有三个 power-select，其中两个工作正常，但第三个 (companyType) 的行为很奇怪 - 当您第一次进入表单时，该值是空白的。当您 select 一个值时，它会从那时起为该记录保留（直到您刷新页面）

模板：

// templates/components/companies/edit-new-form.hbs
{{#bs-form formLayout=formLayout model=company onSubmit=(action "save") as |form|}}
    <label>State:
      {{#power-select
        selected=company.state
        options=states
        onchange=(action "chooseState")
        as |name|
      }}
        {{name}}
      {{/power-select}}
    </label>

    <label>County:
      {{#power-select
        selected=company.county
        options=countyNames
        onchange=(action "chooseCounty")
        as |name|
      }}
        {{name}}
      {{/power-select}}
    </label>

    <label>Company Type:
      {{#power-select class="select"
        selected=company.companyType
        options=companyTypes
        onchange=(action "chooseCompanyType")
        as |name|
      }}
        {{name.companyType}}
      {{/power-select}}
    </label>
{{/bs-form}}

JS:

// componnents/companies/edit-new-form.js
export default Ember.Component.extend({
  company: null,
  router: Ember.inject.service('-routing'),
  ajax: Ember.inject.service(),
  store: Ember.inject.service(),

  countyNames: Ember.computed('company.state', function() {
    return this.get('ajax').request(config.host + '/api/counties/' + this.company.get('state')).then( (json) => json.map( (county) => {
      return county.countyName;
    })
  )
}),

  states: ['AK', 'AL', 'AR', 'AZ', 'CA', 'CO', 'CT', 'DC', 'DE', 'FL', 'GA', 'HI', 'IA', 'ID', 'IL', 'IN', 'KS', 'KY', 'LA', 'MA', 'MD', 'ME', 'MI', 'MN', 'MO', 'MS', 'MT', 'NC', 'ND', 'NE', 'NH', 'NJ', 'NM', 'NV', 'NY', 'OH', 'OK', 'OR', 'PA', 'RI', 'SC', 'SD', 'TN', 'TX', 'UT', 'VA', 'VT', 'WA', 'WI', 'WV', 'WY'],

  actions: {
    // For dropdown handling
    chooseState(state) {
      this.set('company.state', state);
      //Ember.set(this, "counties", this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json.items));
      //this.set('counties', this.get('ajax').request(config.host + '/api/counties/' + state).then((json) => json));
    },

    chooseCounty(countyName) {
      this.set('company.county', countyName);
    },

    chooseCompanyType(companyType) {
      this.set('company.companyType', companyType);
    },

  }
});

这是路线和模型挂钩：

// routes/companies/edit.js
export default Ember.Route.extend({
  model(params) {
    var store = this.store;
    return Ember.RSVP.hash({
      companies: store.findRecord('company', params.company_id),
      companyTypes: store.findAll('companyType')
    });
  }
});

获取companyType模型的路由是：

// routes/company-types.js
export default Ember.Route.extend({
  model() {
    return this.get('store').findAll('company-type');
  }
});

还有我的模特：

// models/company.js
export default DS.Model.extend({
  companyName: DS.attr('string'),
  street: DS.attr('string'),
  county: DS.attr('string'),
  city: DS.attr('string'),
  state: DS.attr('string'),
  zip: DS.attr('string'),
  phone: DS.attr('string'),
  email: DS.attr('string'),
  fax: DS.attr('string'),
  companyType: DS.attr('string')
});

// models/company-type.js
export default DS.Model.extend({
  companyType: DS.attr('string')
});

查看 Ember Inspector，根据我的模型，companyType 的数据是一个字符串。当我 select 来自保管箱的值时，数据类型变为 <svegbackend@model:company-type::ember1326:Environ Engineer。当我 select 其他下拉列表之一时，该值仍然是一个字符串，我认为这是有道理的，因为这些来源是字符串数组。

那么如何让下拉菜单在加载表单时显示值？

Answer 1

问题是，company 的 companyType 是字符串类型，而第三个 select 的选项列表是 companyType 模型类型。这会在最初设置 selected 选项时造成不匹配。

定义三次方select如下：

{#power-select class="select"
    selected=company.companyType
    options=companyTypesOptions
    onchange=(action "chooseCompanyType")
    as |name|
}}
    {{name}}
{{/power-select}}

并在edit-new-form.js中定义companyTypesOptions如下：

companyTypesOptions: Ember.computed('companyTypes.[]', function() {
    return this.get('companyTypes').map((companyType)=> {
        return Ember.get(companyType, 'companyType');
    }); 
})

通过这种方式；您将创建选项列表和字符串类型的 selected 值！不要忘记选项的类型和您传递的 selected 是否不同；你会惹上麻烦的！尽量避免这种情况！

Power-select 未显示 selected 值

Power-select not showing the selected value

ember.js

ember-data