帮酷LOGO
0 0 评论
  • 显示原文与译文双语对照的内容
文章标签:Select  Html选择  Native  component  COM  NAT  BASE  ember  
Select component for Ember based on the native html select element.

  • 源代码名称:emberx-select
  • 源代码网址:http://www.github.com/thefrontside/emberx-select
  • emberx-select源代码文档
  • emberx-select源代码下载
  • Git URL:
    git://www.github.com/thefrontside/emberx-select.git
  • Git Clone代码到本地:
    git clone http://www.github.com/thefrontside/emberx-select
  • Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/thefrontside/emberx-select
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
  • emberx选择

    Ember Badgenpm versionEmber Observer ScoreCircleCI

    基于本机html选择的选择组件。

    我们已经尝试了其他选择组件,并且缺少本机 html <select>的可靠性。可以维护性和 accessbility。 <x-select> 是组件的一滴,让你可以使用任何对象来选择选项。 你可以使用它从盒子中,或者作为一个更有浪漫力的构建 block。

    <x-select>的目标是让你了解它的工作方式和风格,而不是传递一个配置球,或者包装一个硬编码的。不能访问的jQuery插件。

    安装

    
    ember install emberx-select
    
    
    
    

    通过允许任意html出现在select元素的模板中,可以像通常一样使用它。 这意味着像使用 <optgroup> 标签 inside的事情,甚至是纯旧的<option> 元素,表示空值的内容。

    XSelect稀疏包装本机 <select> 元素,以便它可以是对象和绑定的。 它与 x-option 组件一起使用来构造选择框。 E.g.

    {{#x-selectvalue=bobaction=(action"selectPerson") as |xs|}}{{#xs.optionvalue=fred}}Fred Flintstone{{/xs.option}}{{#xs.optionvalue=bob}}Bob Newhart{{/xs.option}}{{/x-select}}

    这些选项总是最新的,这样当对象绑定到 value 时,相应的选项就会被选中。

    每当选择标记接收到更改事件时,就会触发 action

    上下文组件

    在版本 3.0.0中,emberx-select 只支持上下文组件。 这意味着你必须使用 Ember 2.3或者更高版本。 使用上下文组件可以让 emberx-select 跳过一些可能昂贵的DOM遍历。 现在,选项可以通过数据进行 register,而不是通过。

    {{#x-selectvalue=model.statusas |xs|}}{{#xs.optionvalue=1}}Active{{/xs.option}}{{#xs.optionvalue=2}}Inactive{{/xs.option}}{{/x-select}}

    多选

    从版本 1.1.0开始,emberx-select 支持 multiple 选项。 这意味着可以将 array 作为它的值传递,它将直接在 array 上设置它的选择。

    {{#x-selectvalue=selectionsmultiple=trueaction="selectionsChanged"as |xs|}}{{#xs.optionvalue=fred}}Fred Flintstone{{/xs.option}}{{#xs.optionvalue=bob}}Bob Newhart{{/xs.option}}{{#xs.optionvalue=andrew}}Andrew WK{{/xs.option}}{{/x-select}}

    选择 array 将被初始化为空的array 如果不存在。

    操作和操作参数

    所有x 选择动作都是关闭操作。 这意味着你必须使用 action helper ( 例如。 on-click=(action"onClick") )。每当事件触发有一个函数签名时,由x 调度的函数:

    /*** @param{Object}value - the value selected by the user.* @param{Object}event - the jQuery event of the action*/function (value, event) {
     // action body...}

    大多数时候你所需要的是已经选择的值,但有时你的操作需要更多的上下文。 在这些情况下,你可以从模板传递任何需要的参数。 例如:

    {{#x-selecton-click=(action"didMakeSelection"isXSelectRequired) required=isXSelectRequiredas |xs|}} <option>Nothing</option>
     {{#xs.optionvalue=something}}Something{{/xs.option}}{{/x-select}}

    然后,inside 你的操作处理程序:

    importControllerfrom'@ember/controller';exportdefaultController.extend({
     actions: {
     didMakeSelection(value, event, isXSelectRequired) {
     if (!value & isXSelectRequired) {
     this.set('error', 'You must fill out this field');
     } else {
     this.set('selection', value);
     }
     }
     }
    });

    x 选择提供在不同事件类型上激发的其他操作。 这些操作遵循HTML输入事件命名约定。

    onblur

    在x 选择组件上触发 blur 事件时,on-blur 激发。 当操作激发时,将发送两个参数: 值,jQuery事件。

    on-focus-out

    在x 选择组件上触发 focusOut 事件时,on-focus-out 激发。 当操作激发时,将发送两个参数: 值,jQuery事件。

    onclick

    单击 clicked select on-click 激发。 当操作激发时,将发送两个参数: 值,jQuery事件。

    禁用( x 选项) 上的英镑

    当x 选项检测到对它的disabled 属性的更改时,on-disable 会激发。 当操作激发时,将发送两个参数: 值,如果它是禁用的( 布尔型)。

    测试 helper

    由于 x-select 使用内部标识符作为 value 属性,所以它不与 fillIn 测试 helper 集成。 但别担心,我们为你建立了一个测试 helper。

    使用测试 helper

    要在测试中使用 select helper,你必须导入select函数:

    import { select } from"yourappname/tests/helpers/x-select";

    我们同时支持multiselects和常规选择。 要使用,需要在选择( 或者一个jquery对象) 上指定类作为第一个参数,它的余参数是选择的选项。 例如:

    //... Single selectselect(".my-drop-down", "My Option");//...

    多选

    //... Multiselectselect(Ember.$(".my-drop-down"), "My Option", "My Option Two", "My Option Three");//...

    EmberX

    emberx选择是"ember缺少组件"的一部分,统称为 emberx:

    其他资源

    运行测试

    • ember test
    • ember test --server

    运行时代码

    请注意,这个项目是由一个参与者代码发布的。 通过参与这个项目,你同意遵守它的术语,它可以在这个库的CODE_OF_CONDUCT.md 文件中找到。



    文章标签:COM  BASE  component  NAT  Native  Select  ember  Html选择  

    Copyright © 2011 HelpLib All rights reserved.    知识分享协议 京ICP备05059198号-3  |  如果智培  |  酷兔英语