如何使用ember2.0监听下拉列表的选择变化并设置默认选择值？

Question

我已经创建了国家名称的下拉列表并将国家代码设置为每个选项的值。我想设置默认国家名称并听取下拉列表的选择更改。我尝试了以下代码

HTML

<select class="left-float" onchange={{action selectionchange}} >
  {{#each model.countries as |country|}}
   <option value="{{country.code}}" selected={{eq country.code "IN"}} >{{country.name}}</option>
 {{/each}}
</select>

路由器

App.SignupRoute = Ember.Route.extend({
  model: function () {            
    return Ember.RSVP.hash({
        countries: Countries
    });
},
actions:{
selectionchange:function(value){

}
}
});

请帮我解决这个问题

Answer 1

@辛杜，

另一个简单的解决方案是创建一个自定义助手eq。自定义助手看起来像：

import Ember from 'ember';
export function eq(params) {
  return params[0] === params[1];
}
export default Ember.Helper.helper(eq);

工作示例：https://ember-twiddle.com/d4aaf5790e40b20ce492。您可以通过单击 Dependencies -> Ember.js -> version 来更改 emberjs 版本。该代码适用于 v2.0.2。

让我知道此解决方案是否适合您。

Answer 2

以下是实现 selectionChange 的方法：

哈佛商学院：

    <select class="left-float" onchange={{action "selectionchange" value="target.value"}} >   
    {{#each countries as |country|}}    
        <option value="{{country.code}}"  selected={{eq selectedCodecountry.code}}>
         {{country.name}}
     </option>  
    {{/each}} 
  </select>

内部控制器

 countries: [
         {code:"IN", name: "India"},
         {code: "US", name: "USA"},
         {code: "UK", name: "UK"}
       ],
       selectedCode: "US",
       actions: {
         selectionchange(code) {
           this.set('selectedCode', code);
         }

希望对你有帮助。