燼JS拿到形式選擇提交

Question

試圖尋找與形式的選擇列表中的一些例子之後，但似乎他們總是值在我的項目中使用的onchange功能 http://balinterdi.com/2015/08/29/how-to-do-a-select-dropdown-in-ember-20.html

不過，我想是這樣的：

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

在我的控制，我有：

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 .. 
    }, 
} 

我能做些什麼，這樣我可以從選擇中createBook值（）動作？

Answer 1

可以傳遞選擇onchange中的選項值並從action中設置值處理程序，

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

操作，

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

Answer 2

您可以在平變化的方法使用這樣

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

，並設置郎的選擇項的屬性

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

請點擊這裏Twiddle