ember.js - Ember Ember.select 获取选定值

Question

我有一个简单的 Ember 应用程序，其中有一个输入框、两个选择框和一个按钮。我可以在“doSearch”方法中访问输入框的值，但不能访问选择框的值。
到目前为止，我没有尝试任何工作 - 我注释掉了我访问选择的失败尝试。我开始认为这与我对 Ember 的有限知识有关。

任何帮助都感激不尽。
这是我的 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 的属性(property)绑定(bind)到这些变量的类

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

希望能帮助到你。