是否能为控件增加data属性？ about esui HOT 22 CLOSED

补充一下，这个东西其实是能做成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元素上的，所以过程其实是这样：

1. main把data-ui-data-abc解析成了dataAbc放在控件上
2. 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.