如何使用ember下拉框组件？？

文章来源：ember teach

This addon enables legacy view support without deprecation notices in Ember.js 1.13. In Ember.js 2.0 views are not present at all, and this addon brings them back. After Ember 2.4 is released this addon will no longer be compatible with Ember. It should be used to provide extra time for migrating away from views, not as a permanent solution.

简而言之，select组件从2.0开始声明为过时，2.4版本后完全移除，如果你的项目是在2.0到2.4之间的可以通过安装插件ember-legacy-views支持select组件的使用。

不过，还是有很多问题！！！！

比如：网上看到好多人问怎么获取select组件的值？？

找了半天很遗憾我也不知道！！=^=

最起码你在官网API上是找不到的，非常纳闷，官方居然没有介绍怎么去获取select下拉组件的值，单纯介绍了怎么在模板中使用！！不过官方没介绍如何获取也不要紧，因为……因为从2.0开始官方不支持这个组件啦（请看版本更新说明）！！哈哈哈！！真机智！！开个玩笑……

官方不支持了，那怎么办呢！！简单啊，直接使用原生HTML不就完了，别搞那么复杂，反正我是直接使用原生的<select>标签实现，简单又熟悉。下面是我的实现代码：

<!-- app/templates/application.hbs -->
<h2 id="title">下拉组件select使用</h2>

<!--
在2.0至2.4之间的版本可以使用插件方式安装使用这个view，但是从2.4之后连插件方式也不支持了。
既然官方不支持这个view那我们直接使用原生<select>标签即可，没必要搞的那么复杂。
-->
使用onclick事件触发选中某个值（由于是一点中下拉框就获取值，所以获取得到的值并不是最后选择的值）：<br>
<select class="" onclick={{action 'getValue' value="target.value"}}>
    <option value="1" selected="selected">身份证</option>
    <option value="2">学生证</option>
    <option value="3">军官证</option>
    <option value="4">通行证</option>
</select>

<br><br><br>使用onchange事件触发选中某个值：<br>
<select class="" onchange={{action 'getValue' value="target.value"}}>
    <option value="12" selected="selected">身份证</option>
    <option value="22">学生证</option>
    <option value="23">军官证</option>
    <option value="24">通行证</option>
</select>

// app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
    defaultValue: 'blog.ddlisting.com',
    names: ['ddlisting.com','blog.ddlisting.com','anli.ddlisting.com'],
    actions: {
        getValue: function(params) {
            //  获取选中的值
            console.log('params = ' + params);
        }
    }
});

运行结果我就不截图，就是个普通的action调用，可以在控制台看到选中的值，想看结果就自己动手看看吧！！！

然而，如果你是按照官网教程那么使用我也不知道怎么去获取下拉框的值！！比如下面的代码：

{{view "select" content=names value=defaultValue
    optionValuePath="content.value" optionLabelPath="content.label"
    selectionBinding="selectChange"}}

如果有读者知道请转告一声。。

如果一定要用这个组件怎么办！！网上提供了很多扩展插件，找了其中觉得很不错一款power-select，非常好用，关键是文档也很好！！下面是我的实例：

使用插件获取ember的select组件选中值<br>
{{#power-select options=names selected=defaultValue onchange=(action 'obtain') as |item|}}
    {{item}}
{{/power-select}}

// app/controllers/application.js

import Ember from 'ember';

export default Ember.Controller.extend({
    defaultValue: 'blog.ddlisting.com',
    names: ['ddlisting.com','blog.ddlisting.com','anli.ddlisting.com'],
    actions: {
        // 设置select插件默认值,defaultValue与模板中selected属性值一致
        defaultValue: 'blog.ddlisting.com',
        obtain: function(params) {
            //  设置下拉框为选中的值
            this.set('defaultValue', params);
            // 获取下拉框选中的值
            console.log('obtain params = ' + params);
        }
    }
});

运行http://localhost:4200/，结果如下截图：