group-radio

多组筛选器

实例

请参考 ./doc/index.html

使用

1. 在node平台上 使用 npm install group-radio --save-dev 下载到本地项目

2. 下载依赖 jquery.js.

3. 引入到相应的 html 文件中

<script src="file path/jquery.min.js"></script>
<script src="file path/group-radio.min.js"></script>

4. 使用组件

第一个参数为组件视图的挂载点,可是是element,css选择器,jQuery对象等任何jQuery支持的类型, 第二个参数为需要数据,其中,groups代表组列表,members代表成员列表,每个成员中要包含groupId属性,代表所谓分组的id.

var popover = new $.Popover(document.body, { // 该组件的视图会挂在到 document.body 上
        groups: [{ // 组
            id: 0,
            name: '小组一'
        }...,{
            id: 3,
            name: '小组四'
        }],
        members: [{ // 成员
            id: 0,
            groupId: 0, // 所属组的`id`
            name: '0-0'
        }...,{
            id: 11,
            groupId: 2,
            name: '2-11'
        }]
    });
    

5. 给组件实例绑定事件,以方便根据处理被选中的成员做相关的业务处理. popover向外部抛出了两个事件处理接口.

• member.selected, 特定成员被选定后触发.
• member.allSelected, 选定全组成员后触发.

    popover.on('member.selected', function(member){
        console.log(member); // {id: '', name: ''}
    });
    popover.on('member.allSelected', function(member){
        console.log(member); // {id: '', name: ''}
    });
    

视图结构

先思考实现此功能需要什么样的视图结构

root
    |-- <div.arrow>
    `-- <div.popover>
        |-- <div.groups>
        |   `-- [<radio.group>]
        `-- <div.members>
            |-- <div.toggle>
            |   `-- <radio.reverse>
            `-- [<radio.member>]
            

拆分成组件

接下来根据视图结构拆分成组件

1. popover, 功能:组织小组和成员, 管理他们的现实和直接的交互.
2. radio, 独立的元素级别组件, 管理自身的选中状态及其不同状态的样式和值, 其中每一组radio有多个 radio 组成, 相互之间的选中状态是互斥的.

组件间的通讯

降低组件之间的耦合度,使用事件机制进行通讯,接近NodeJS核心模块设计理解, 每个组件都是基于一个事件发射器(Emitter)的基类, 使每个组件都可以放别绑定和触发事件, 这和flux的思想不同,每个组件实例独有自己的事件管理,相互不共享事件, 这样的设计使得每次使用组件有需要存取该组件的实例引用,以方便管理事件,但解耦合更充分 在交互中,组件会出发相应的事件, 虽然不是统一管理的事件机制,但是在理清楚交互过程以后,会更方便的管理其交互流,更便于维护, 现在也在思考一种交互流管理文档, 其中:

1. radio 被点击选中后触发 'radio.click' 事件.
2. popover 被点击选中分组或成员后, 触发 'member.selected' 事件,并把成员的属性传递给绑定的函数.

todo

• 简化事件