Ember.js erhalten Form nach wählen

Question

einreichen versucht, einige Beispiel mit Formular Auswahlliste zu suchen, aber es scheint sie onChange Funktion unter Verwendung http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html

jedoch in meinem Projekt möchte ich so etwas wie dies immer Wert annehmen:

<form {{action "createBook" on="submit"}}> 
    <p>{{input type='text' id='title' value=title}}</p> 
    <p> <select name="lang" id="lang"> 
     <option value="">--Choose--</option> 
     {{#each model.language as |lang|}} 
      <option value="{{lang.url}}">{{lang.title}}</option> 
     {{/each}} 
     </select> 
    </p> 
</form> 

in meinem Controller habe ich:

actions:{ 
    createBook() { 
    var title = this.get('title'); //This line works fine 
    var lang = this.get('lang'); //This value from select isnt working at all 
    //do stuffs .. 
    }, 
} 

Was kann ich tun, damit ich den Wert von ausgewählten in createBook() Aktionen bekommen?

Answer 1

können Sie übergeben der Optionswert in onchange auswählen und den Wert in from action setzen Handler,

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

Aktionen,

actions: { 
    selectOption: function(option) { 
     this.set("lang", option); 
    } 
} 

Answer 2

Sie dieses

<select {{action 'change' on='change'}}> 
    {{#each content as |item|}} 
    <option value="{{item.id}}"> 
    {{item.name}} 
    </option> 
{{/each}} 

in onChange Methode verwenden können und setzen Sie die Eigenschaft von lang ausgewählter Artikel

actions: { 
    createBook() { 
    var title = this.get('title'); //This line works fine 
    var lang = this.get('lang'); 
    console.log(lang, title); 
    }, 

    change() { 
    const selectedEl = this.$('select')[0]; 
    const selectedIndex = selectedEl.selectedIndex; 
    const selectedValue = this.get('content')[selectedIndex]; 
    this.set('lang', selectedValue.id) 
    } 
} 

Bitte überprüfen Sie hier Twiddle