ember.js - Ember Power Select - 标签/值

Question

我似乎无法理解如何通过查看 docs 来执行以下操作对于“ Ember 电源选择”。

我有一个模型用户:

export default Model.extend({
    "state": attr('string')
});

在数据库中存储的值是:NY for state

我还有以下数据要加载到 ember 电源选择选项中:

stateList: [
    {
        label: 'New Jersey',
        value: 'NJ'
    },
    {
        label: 'New York',
        value: 'NY'
    },
]

以下 Handlebars 代码将加载状态并显示它们。您可以搜索并选择状态:

{{#power-select 
    options=stateList
    searchField="label"
    selected=state
    onchange=(action (mut state))
    as |state|
}}
    {{state.label}}
{{/power-select}}

问题...在选择'New York' 时，我希望'state' 的存储值为'NY'

现在它只是存储整个对象。我知道通过 'onchange' 我可以设置值，但我真的不明白你是如何将值设置为 'NY' 并选中它的？

我试过

this.set('state',selection.value)

但我认为它正在寻找对象的索引，但是我只想传递“NY”而不是整个对象...这可能吗？

Answer 1

您的问题的答案是否定的(AFAIK)。但是您可以使用计算属性来实现这一点。

Component js code

import Ember from 'ember';

export default Ember.Component.extend({
  stateList: [{'label': 'New Jersey','value': 'NJ'},{ 'label': 'New York','value': 'NY'}],
  state:'NY',
  selectedState: Ember.computed('state', function(){    
    return this.get('stateList').findBy('value',this.get('state'));
  }),

  actions:{
    setSelectedState(selectedVal){      
      this.set('state',selectedVal.value);
    }
  }
});

Component hbs code

{{#power-select 
    options=stateList
    searchField="label"
    selected=selectedState
    onchange=(action 'setSelectedState')
    as |state|
}}
    {{state.label}}
{{/power-select}}
{{yield}}

这是 Ember-Twiddle