文档章节

如何使用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
287
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

没有更多内容

加载失败,请刷新页面

加载更多

nginx学习笔记

中间件位于客户机/ 服务器的操作系统之上,管理计算机资源和网络通讯。 是连接两个独立应用程序或独立系统的软件。 web请求通过中间件可以直接调用操作系统,也可以经过中间件把请求分发到多...

码农实战
今天
5
0
Spring Security 实战干货:玩转自定义登录

1. 前言 前面的关于 Spring Security 相关的文章只是一个预热。为了接下来更好的实战,如果你错过了请从 Spring Security 实战系列 开始。安全访问的第一步就是认证(Authentication),认证...

码农小胖哥
今天
11
0
JAVA 实现雪花算法生成唯一订单号工具类

import lombok.SneakyThrows;import lombok.extern.slf4j.Slf4j;import java.util.Calendar;/** * Default distributed primary key generator. * * <p> * Use snowflake......

huangkejie
昨天
12
0
PhotoShop 色调:RGB/CMYK 颜色模式

一·、 RGB : 三原色:红绿蓝 1.通道:通道中的红绿蓝通道分别对应的是红绿蓝三种原色(RGB)的显示范围 1.差值模式能模拟三种原色叠加之后的效果 2.添加-颜色曲线:调整图像RGB颜色----R色增强...

东方墨天
昨天
11
1
将博客搬至CSDN

将博客搬至CSDN

算法与编程之美
昨天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部