0.0.2 • Published 8 years ago
group-radio v0.0.2
group-radio
多组筛选器
实例
请参考 ./doc/index.html
使用
在
node
平台上 使用npm install group-radio --save-dev
下载到本地项目下载依赖
jquery.js
.引入到相应的 html 文件中
<script src="file path/jquery.min.js"></script>
<script src="file path/group-radio.min.js"></script>
- 使用组件
第一个参数为组件视图的挂载点,可是是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'
}]
});
- 给组件实例绑定事件,以方便根据处理被选中的成员做相关的业务处理. 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>]
拆分成组件
接下来根据视图结构拆分成组件
- popover, 功能:组织小组和成员, 管理他们的现实和直接的交互.
- radio, 独立的元素级别组件, 管理自身的选中状态及其不同状态的样式和值, 其中每一组radio有多个 radio 组成, 相互之间的选中状态是互斥的.
组件间的通讯
降低组件之间的耦合度,使用事件机制进行通讯,接近NodeJS
核心模块设计理解,
每个组件都是基于一个事件发射器(Emitter)的基类, 使每个组件都可以放别绑定和触发事件,
这和flux
的思想不同,每个组件实例独有自己的事件管理,相互不共享事件,
这样的设计使得每次使用组件有需要存取该组件的实例引用,以方便管理事件,但解耦合更充分
在交互中,组件会出发相应的事件,
虽然不是统一管理的事件机制,但是在理清楚交互过程以后,会更方便的管理其交互流,更便于维护,
现在也在思考一种交互流管理文档,
其中:
1. radio 被点击选中后触发 'radio.click' 事件.
2. popover 被点击选中分组或成员后, 触发 'member.selected' 事件,并把成员的属性传递给绑定的函数.
todo
- 简化事件