Ember Ember.select获取所选值 [英] Ember Ember.select get selected value

问题描述

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

任何帮助将不胜感激。
这是我的HTML和脚本：

 < script type =text / x-handlebarsdata-template -name = 应用 > 
< div id =headerDiv> 
< ul> 
< li> 
< image src =logo.pngstyle =width：439px; height：102px;/> 
< / li> 
< li> 
 {{input type =textplaceholder =搜索内容value = newSearch action =doSearch}} 
< / li> 
< li> 
< button type =button{{actiondoSearch}}>搜索< / button> 
< / li> 
< li> {{＃link-to'home'}}首页{{/ link-to}} | {{link-to'help'}}帮助{{/ link-to}}< / li> 
< / ul> 
< / div> 
 
< span class =filter>内容类型：
 {{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}，
 {label：今天，值：今天}，
 {标签：最近7天，值：7天} 
]，
操作：{
 doSearch：function（）{
 var searchVal = this.get（'newSearch'）; 
 if（！searchVal.trim（））{ return;} 
 console.log（'get searchVal：'，searchVal）; 
 
 var selectType = $（＃selectContentType）。val（）; 
 // $ （#selectContentType option：selected）。val（）; 
 //this.get('selectContentType.value'）; 
 console.log（'select selectType：'，selectType）; 
} 
} 
}）; 
  

解决方案

扩展您的 ApplicationController 具有两个新变量来保存所选值：

  App.ApplicationController = Ember.ArrayController.extend（{ 
 selectedContentType：null，
 selectedDate：null，
 ... 
}）; 
  

并使用 selectionBinding a href =http://emberjs.com/api/classes/Ember.Select.html =noreferrer> Ember.Select 类绑定到这些变量

 < span class =filter>内容类型：
 {{view Ember选择
 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，
 ... 
操作：{
 doSearch：function（）{
 var selectedDate = this.get（'selectedDate.value'）; 
 console.log（selectedDate）; 
 
 var selectedType = this.get（'selectedContentType.value'）; 
 console.log（selectedType）; 
} 
} 
}）; 
  

希望有帮助。

I have a simple Ember application where I have an input box, two select boxes and a button. I can access the value of the input box in the method "doSearch", but not the values of select boxes. So far, nothing I tried worked - I commented out my failing attempts to access the selection. I'm beginnig to think this has to be related to my limited knowledge of Ember.

Any help will be much appreciated. Here is my HTML and script:

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

This is the javascript where I'm attempting to reach the select boxes:

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

解决方案

Extend your ApplicationController with two new variables to hold the selected values:

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

and use the selectionBinding property of the Ember.Select class to bind to those variables

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

then you can later access them easily with:

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

Hope it helps.

这篇关于Ember Ember.select获取所选值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！