2016-08-05 11 views
2

マイテンプレート:ember-cliフォームセレクトからデフォルト値を設定する方法は?

<select name="lang" id="lang" onchange={{action "selectOption" value="target.value"}}> 
    <option value="">--Choose--</option> 
    {{#each model as |lang|}} 
    <option value="{{lang.url}}">{{lang.title}}</option> 
    {{/each}} 
</select> 

lang.urlは、値のいずれかを持っている:['php', 'javascript', ...]

マイコントローラー:私はPHPに選択のデフォルト値を設定するにはどうすればよい

lang: 'php', //this is not working, I am thinking of something like lang.url or lang.get('url') but looks like it is still not right .. 
actions: { 
selectOption: function(option) { 
    this.set("lang", option); 
} 

答えて

0

trueを、選択したオプションのselected属性に設定します。このようなもの:

<option value="{{lang.url}}" selected={{eq lang.url lang}}>{{lang.title}}</option> 

eq helperがあります。私は推測する、コントローラ内の各ブロックのヘルパーでlangプロパティは異なるコンテキストを参照

0

はあなたには、いくつかの他のプロパティ名にコントローラに

application.jsをLANGプロパティを変更する必要がproblem.eitherある - >ルート

import Ember from 'ember'; 

export default Ember.Route.extend({ 
    model(){ 
    return [{'url':'phpurl','title':'phptitle'},{'url':'javascripturl','title':'javascripttitle'}]; 
    } 
}); 

application.js - >コントローラ

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    lang: 'phpurl', 
    actions: { 
     selectOption: function(option) { 
     console.log(option); 
     this.set("lang", option); 
     } 
    } 
}); 

application.hbs - >テンプレートファイルの作業

<select name="lang" id="lang" onchange={{action "selectOption" value="target.value"}}> 
    <option value="">--Choose--</option> 
    {{#each model as |item|}} 
    <option value="{{item.url}}" selected={{eq item.url lang}}>{{item.title}}</option> 
    {{/each}} 
</select> 

{{outlet}} 

サンプルember-twiddle