Comments (22)
补充一下,这个东西其实是能做成Extension的,与控件本身生命周期无关、但很通用的东西,在ESUI3.0中都可以纳入Extension体系,保证控件本身是精简的核心,业务团队可以放心使用,Extesion则是爱用不用,这也是ESUI3.0最大的特点
所以也请衡量下是放在Control基类中实现好还是放Extension中好
from esui.
为了控件更好的封闭性,控件的main元素不宜暴露给用户。
但是用户还是会有往控件上添加某些数据的需求
我没太理解他俩之间有啥关系
至于放Control好还是放Extension好,我觉得都是可以接受的,都不违背原则
from esui.
我没太理解他俩之间有啥关系
个人解读:写HTML的时候会用data-*
把数据放在元素上,但被控件一封装,这个元素成了控件的main
,就不好意思去上面再getAttribute('data-xxx')
拿数据了,所以要有个办法把这些东西弄到控件上来可以拿到
from esui.
喔,涨姿势了。等作者出来解释
from esui.
我的理解是这样的,比如一个控件暴露出onclick事件,如果业务人员需要在处理这个事件时获取main的一些属性(如id或自己在dom上挂的attribute), 是否可以this.main.id(this.main.getAttribute)获取,main不允许暴露的话要怎么处理
from esui.
控件暴露事件时应该把需要的东西都丢出去,剩下的应该在控件本身上面,所以 @wurongyao 说的data应该来处理这事
from esui.
业务开发者永远不应该关心和使用控件的dom结构,我觉得是基本原则和常识
from esui.
为了控件更好的封闭性,控件的main元素不宜暴露给用户。
但是用户还是会有往控件上添加某些数据的需求
因为用户一开始只能操作这个main元素,往上面加属性啊什么的,可最后控件渲染完他却拿不着main了。
所以需要在控件层面给他暴露出接口,让他去取原来他放在dom上的一些信息。
这里的关键还是要不要暴露main,如果暴露,那用户自己会处理,但可能他的处理方式不是我们想要的。
如不暴露,我们可能就得提供接口给用户,否则他可能会骂娘。
from esui.
坚决不开放main
,我们来提供接口吧,我先试着做一个Extension出来,有需要的随时迁到Control基类中就能用,晚上我会丢github上来
from esui.
我觉得可以有setData和getData,但其取的是啥,我们还没有定义。
当然我更奇怪的是下面的这个需求,用户要往main上挂什么信息
因为用户一开始只能操作这个main元素,往上面加属性啊什么的,可最后控件渲染完他却拿不着main了。
所以需要在控件层面给他暴露出接口,让他去取原来他放在dom上的一些信息。
from esui.
当然我更奇怪的是下面的这个需求,用户要往main上挂什么信息
任何信息都可能挂啊,比如在TextBox
上挂一个visible-role="admin"
,在业务逻辑中通过这个属性来确定是否要隐藏,是非常正常的需求嘛。
在写tpl的时候,只能写HTML,所以就只能在main
元素上放这属性,但又要通过控件能拿到。
from esui.
这个。。。貌似不是正常做法吧。
这个信息在model里存在,tpl有分支支持,控件有hidden属性。
当然,从前支持的功能没那么丰富
from esui.
但是这意味着得和ER一起用,或者使用ESUI的自己弄个template和model一套机制出来吗?
from esui.
根据数据决策显示隐藏或者是否具有某视图,我觉得是template或js的事情。传统项目也有template的。
如果是需要js动态操作的web应用程序,那数据就应该存在js里,要不多乱啊。
再说就扯远了,拉回来:
初始化的时候,如果options里有data参数,自然就是这货了
那这货怎么从html attribute中映射?
from esui.
无侵入性设计已经来了:
define(
function (require) {
var Extension = require('./Extension');
function ParseData() {
Extension.apply(this, arguments);
}
var dataProperty = /^data[A-Z0-9]/;
ParseData.prototype.activate = function () {
Extension.prototype.activate.apply(this, arguments);
var data = require('./lib').parseAttribute(this.target.data);
for (var key in this.target) {
if (this.target.hasOwnProperty(key) && dataProperty.test(key)) {
data[key] = this.target[key];
}
}
this.target.getData = function (key) {
return data[key];
};
this.target.setData = function (key, value) {
data[key] = value;
};
};
ParseData.prototype.inactivate = function () {
Extension.prototype.inactivate.apply(this, arguments);
delete this.target.getData;
delete this.target.setData;
};
}
);
策略就是data-ui-data="a:1;b:2;"
及data-ui-data-c="3"
from esui.
赞
/^data[A-Z0-9]/
有点小问题
from esui.
这个正则可以细细琢磨,不用/^data\w/
是因为有datasource
这种属性不应该丢进来
from esui.
/^data($|-)/
from esui.
data
是前面单独提出来的,要按style
属性的规则解析,是特殊的。
然后Extension是没管到HTML元素上的,所以过程其实是这样:
main
把data-ui-data-abc
解析成了dataAbc
放在控件上- Extension拿的
dataAbc
这个 控件上的属性
这样是对原有的控件创建流程完全不影响(不用main
知晓)
from esui.
喔,看错了。应该没啥问题~
from esui.
因为提交时忘了add文件,分2次commit了……
在 ec818fd 和 80ad4ec 中加了CustomData
这个扩展,相关的测试也补上了
可以在 test/extension/CustomData.js 中大概看看怎么用,总之:
- 控件上有
data
属性的,按类似style
属性的策略解析成一个对象 - 其它符合
data[A-Z0-9]
的属性,也会去掉 data 前缀,再把第1个字母改成小写后,作为属性放在数据上
对应HTML的写法:
<input data-ui-type="TextBox"
data-ui-data="x: 1; y: 2;"
data-ui-data-z="3" />
这样就会有x
、y
、z
共3个数据,当然因为是从HTML里来的,类型都是字符串了,后续可能会考虑给CustomData
增加些选项,比如valueReplacer
来支持不同类型的转换。
这是个扩展,如果要求所有控件都有这功能,可以调用main.attachExtension(CustomData)
来实现,如果觉得这方法确实很有必要,我们简单地把源码搬到Control
基类里就行。
请 @wurongyao 和 @kitemao 再看一下现在这样的解决方案如何
from esui.
赞
from esui.
Related Issues (20)
- 日程投放控件 HOT 4
- InputCollection 应当继承 ControlCollection HOT 1
- Table 的 overflowX 属性为非 hidden 的时候多出一个横向滚动条 HOT 3
- BoxGroup有一处事件没使用addDOMEvent绑定
- 解决set和setProperties触发change的问题
- Table的依赖不全
- 控件初始化子控件时的valueReplacer管理
- 控件初始化子控件时的valueReplacer管理
- 控件初始化子控件时的valueReplacer管理
- 指定元素的销毁子控件
- Select 控件对于value比较判断的兼容性问题 HOT 2
- 希望能添加一些布局相关的组件 HOT 4
- 对于带有数据源的控件是否应该支持外部不提供数据源的场景的表决 HOT 19
- addChild的时候添加校验 HOT 6
- viewContext的疑问 HOT 3
- 加个Lisence HOT 1
- MonthView的年月下拉框格式可调 HOT 1
- 渐变背景的问题
- Panel控件的addContent方法不适用table布局 HOT 2
- 关于拓展组件
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from esui.