Ember Ember.select получить выбранное значение

Question

У меня есть простое приложение Ember, где у меня есть поле ввода, два блока выбора и кнопка. Я могу получить доступ к значению поля ввода в методе «doSearch», но не в значениях полей выбора. До сих пор ничего, с которым я не работал, я прокомментировал мои неудачные попытки доступа к выбору. Я начинаю думать, что это должно быть связано с моими ограниченными знаниями об Эмбере.

Любая помощь будет очень признательна. Вот мой HTML и сценарий:

<script type="text/x-handlebars" data-template-name="application"> 
     <div id="headerDiv"> 
      <ul> 
       <li> 
        <image src="logo.png" style="width:439px;height:102px;"/> 
       </li> 
       <li> 
        {{input type="text" placeholder="Search content" value=newSearch action="doSearch"}} 
       </li> 
       <li> 
        <button type="button" {{action "doSearch"}}>Search</button> 
       </li> 
       <li>{{#link-to 'home'}}Home{{/link-to}} | {{#link-to 'help'}}Help{{/link-to}}</li> 
      </ul> 
     </div> 

     <span class="filter">Content Type: 
      {{view Ember.Select 
       content=selectContentType 
       optionValuePath="content.value" 
       optionLabelPath="content.label"}} 
     </span> 
     <span class="filter">Date: 
      {{view Ember.Select 
       content=selectDate 
       optionValuePath="content.value" 
       optionLabelPath="content.label"}} 
     </span> 
    </script> 

Это Javascript, где я пытаюсь достигнуть полей выбора:

App = Ember.Application.create(); 

App.Router.map(function(){ 
    this.resource('home', { path: '/' }); 
    this.resource('help'); 
}); 

App.ApplicationController = Ember.ArrayController.extend({ 
    selectContentType: [ 
     {label: "All", value: "all"}, 
     {label: "Text", value: "text"}, 
     {label: "Image", value: "image"} 
    ], 
    selectDate: [ 
     {label: "None", value: "none"}, 
     {label: "Today", value: "today"}, 
     {label: "Last 7 days", value: "7days"} 
    ], 
    actions: { 
     doSearch: function() { 
      var searchVal = this.get('newSearch'); 
      if (!searchVal.trim()) {return;} 
      console.log('got searchVal: ',searchVal); 

      var selectType = $("#selectContentType").val(); 
      //$("#selectContentType option:selected").val(); 
      //this.get('selectContentType.value');    
      console.log('got selectType: ',selectType); 
     } 
    } 
}); 

Answer 1

Расширьте свои ApplicationController с две новые переменные для хранения выбранных значений:

App.ApplicationController = Ember.ArrayController.extend({ 
    selectedContentType: null, 
    selectedDate: null, 
    ... 
}); 

и использовать selectionBinding свойство Ember.Select класса связываться с этими переменными

<span class="filter">Content Type: 
    {{view Ember.Select 
    content=selectContentType 
    optionValuePath="content.value" 
    optionLabelPath="content.label" 
    selectionBinding=selectedContentType}} 
</span> 
<span class="filter">Date: 
    {{view Ember.Select 
    content=selectDate 
    optionValuePath="content.value" 
    optionLabelPath="content.label" 
    selectionBinding=selectedDate}} 
</span> 

, то вы можете позже получить доступ к ним легко с:

App.ApplicationController = Ember.ArrayController.extend({ 
    selectedContentType: null, 
    selectedDate: null, 
    ... 
    actions: { 
    doSearch: function() { 
     var selectedDate = this.get('selectedDate.value'); 
     console.log(selectedDate); 

     var selectedType = this.get('selectedContentType.value'); 
     console.log(selectedType); 
    } 
    } 
}); 

Надеется, что это помогает.