Question

我似乎无法理解如何执行以下操作来查看docs for＆＃34; ember power select＆＃34;。

我有一位模特用户：

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

在数据库中存储的值为： NY 表示状态

我还有以下数据加载到余辉电源选择选项中：

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

以下车把代码将加载状态并显示它们。您可以搜索并选择州：

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

问题...在选择＆＃39;纽约＆＃39; 时，我希望＆＃39;州＆＃39; 的存储值要＆＃39; NY＆＃39;

现在它只是存储整个对象。我理解通过＆＃39; onchange＆＃39; 我可以设置价值，但我真的不明白你如何设置价值＆＃39; NY＆＃39; 并选择它？

我已经尝试过了

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

但我认为它正在寻找对象的索引，但我只是想通过纽约＆＃39;而不是一个完整的对象......这可能吗？

Answer 1

回答你的问题是否定的（AFAIK）。但是你可以使用computed属性来实现这一点。

组件js代码

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);
    }
  }
});

组件hbs代码

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

这是 Ember-Twiddle

Ember Power Select - 标签/价值

1 个答案: