如何监听下拉列表的选择更改并使用ember2.0设置默认选择的值?

时间:2015-11-09 10:16:12

标签: ember.js

我创建了国家/地区名称的下拉列表,并将国家/地区代码设置为每个选项的值。我想设置默认的国家/地区名称,还要监听下拉列表的选择更改。我已尝试过以下代码

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){

}
}
});

请帮我解决这个问题

2 个答案:

答案 0 :(得分:0)

以下是如何实现selectionChange:

HBS:

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

希望它有所帮助。

答案 1 :(得分:0)

@Sindhu,

另一个简单的解决方案是创建自定义助手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。您可以通过单击依赖关系 - &gt;来更改emberjs版本。 Ember.js - &gt;版。该代码适用于v2.0.2。

如果此解决方案适合您,请告诉我。