文档章节

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

ubuntuvim
 ubuntuvim
发布于 2016/03/25 09:24
字数 985
阅读 105
收藏 1

文章来源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/,结果如下截图:

运行结果1

这是页面初始化时候效果,看到默认值是blog.ddlisting.com

运行结果2

此图是选中ddlisting.com后的效果截图。看到在控制台打印了选中的数据。

这个是非常简单的例子,希望对你有帮助!!

参考网址:

  1. https://github.com/emberjs/ember-legacy-views
  2. http://stackoverflow.com/questions/35626545/assertion-failed-using-view-has-been-removed-in-ember-2-0

© 著作权归作者所有

ubuntuvim
粉丝 33
博文 76
码字总数 98477
作品 1
深圳
后端工程师
私信 提问
引入计算属性、action、动态内容

文章来源:http://blog.ddlisting.com/2016/03/31/yin-ru-ji-suan-shu-xing-action-dong-tai-nei-rong/ 美化主页,增加邮件输入框 在主页中增加一个Bootstrap的,在这个组件中增加一个输入框...

ubuntuvim
2016/04/02
77
0
《Nodejs开发加密货币》之二十七:开发通用的HTML组件

前言 人的懒惰常常是麻烦的开始。多数程序员都希望自己的工作一劳永逸,一次开发,到处使用,成了人人追逐的目标,我也不例外。最初写《Nodejs开发加密货币》系列文章,因为不喜欢设定好了去...

imfly
2016/09/14
0
0
Ember.js 入门指南——表单元素

文章从(http://ibeginner.sinaapp.com)迁移过来,欢迎访问原页面。 Ember提供的表单元素都是经过封装的,封装成了view组件。经过解析渲染之后就会生成普通的HTML标签。更多详细信息你可以查...

ubuntuvim
2015/09/21
288
0
从零实现Vue的组件库(十)- Select 实现

当选项过多时,使用下拉菜单展示并选择内容。 Select 组件主要特点在于: 数据双向绑定,下拉列表变动时,选中项如何回显; 单选、多选的区分,以及对应处理。 1. 实例 代码 实例地址:Selec...

FatGe
01/24
0
0
如何在Ember2.0及以上版本模板中使用script标签

文章来源:http://blog.ddlisting.com/ 不再支持直接在模板中使用标签,也就是说不能在模板中直接插入代码段了!官方的建议是尽可能把所有的js代码都放在中。但是实际项目中可能会遇到这样的...

ubuntuvim
2016/05/20
70
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaScript权威指南笔记3-2

第三章、类型、值和变量 2、文本 I-1 字符串 是一组由16位值组成的不可变的有序序列。 每一个字符来自Unicode字符集 用来表示文本 长度是其所含16位值的个数。 和数组一样,索引从0开始。 JS...

_Somuns
10分钟前
1
0
Spring StateMahcine State 配置详解

状态机包含一系列各种关系的状态,最简单的关系,就是经过状态A事件E直接到状态B,当然还有选择关系,层级关系等等。该篇介绍Spring 状态机 状态的配置。我们知道可以通过方法configure(Sta...

microservice
10分钟前
2
0
基于 HTML5 Canvas 实现的文字动画特效

前言 文字是网页中最基本的元素,一般我们在网页上都是展示的静态文字,但是就效果来说,还是比较枯燥的。文字淡入淡出的动画效果在项目中非常实用,如果有某些关键的文字,可以通过这种动态...

htdaydayup
18分钟前
2
0
2019 年 Java 开发者生态报告!

数据来源自国外的一个调查,在过去的几周,这份调查一共采访了6707名开发人员。数据来源:https://www.baeldung.com/java-in-2019。 1.JDK 版本使用情况 即使在今天 Java 13 都已经发布了,J...

SnailClimb
18分钟前
2
0
支撑微博亿级社交平台,小白也能玩转Redis集群(原理篇)

Redis作为一款性能优异的内存数据库,支撑着微博亿级社交平台,也成为很多互联网公司的标配。这里将以Redis Cluster集群为核心,基于最新的Redis5版本,从原理再到实战,玩转Redis集群 常见R...

分布式系统架构
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部