从 data-api 构建实例时，element 的含义应该可配置

[lifesinger]

目前 data-api 存放在什么元素上，该元素就会被当成 widget 的 element

但 data-api 不一定仅存放在 widget element 上，还有可能存放在其他角色上，比如 trigger

因此可以考虑扩展：

<div data-element-role="{{data-element-role}}" data-xx=".."></div>

上面自动会构建：

new XX({

  '{{element-role}}': "该 div 元素",
  'xx': ...

})

目前 {{element-role}} 始终是 "element"， 改成上面的方式后，就可以自定义了。

并且 data-api 也就可以存放在 widget 的非 element 元素上。

[lifesinger]

具体用什么名字待定

[afc163]

两种方式

• 我是 xbox （现有）

<div data-content="我是xbox" data-widget="xbox" data-trigger="#trigger">xbox的元素</div>

• 我是 trigger （期望）

<div id="trigger" data-element-role="trigger" data-content="我是xbox" data-widget="xbox">触发的元素</div>

重点是 data-element-role 的命名。

[afc163]

决定为 data-widget-role

[lifesinger]

我还是觉得 data-element-role 好

等价

new Xxx({

   element: '#xxx',
   elementRole: 'trigger'

})

elementRole 本身也可以像上面的方式使用，表明传入的 element 是当 trigger 用的

[popomore]

这样不好，我们是要把当前 DOM 作为 trigger 参数传入，而不是把 element 视为 trigger。

element 和 trigger 是同时存在的两个 DOM。

[lifesinger]

是否 data-role-in-widget ?

纠结

On Tue, Apr 2, 2013 at 9:47 PM, Haoliang Gao [email protected]:

这样不好，我们是要把当前 DOM 作为 trigger 参数传入，而不是把 element 视为 trigger。

element 和 trigger 是同时存在的两个 DOM。

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/26#issuecomment-15775816
.

王保平 / 玉伯（射雕）
送人玫瑰手有余香

[popomore]

实现中遇到的一些问题

现在的实现

autoRenderAll 会找到所有的 data-widget，下载组件并实例化。实例化会将配置 data-widget 的 DOM 作为 element 参数传入。

// auto-render.js
SubWidget.autoRender({
  element: element,
  renderType: 'auto'
})

实例化时在 initialize 的时候，会从传入的 element 上获取 data-api

// widget
var dataAttrsConfig = this._parseDataAttrsConfig(config)

问题

如果增加 data-widget-role，当这个值为其他值时（比如 trigger），传入的 config 中就不会有 element，_parseDataAttrsConfig 会失效。

解决方案一

解析 data-api 都放到 autoRender 中，解析后作为 config 传入，而不在 initialize 中处理。

// auto-render.js
var dataAttrsConfig = parseDataAttrsConfig(element)
dataAttrsConfig.element = element
dataAttrsConfig.renderType = 'auto'

如果 data-widget-role 为 trigger，则直接在这里判断

// auto-render.js
...
dataAttrsConfig.trigger = element
...

但是这个修改是不兼容的，原来直接实例化的时候也可以读取 element 上的 data-api。

// html
<div id="popup" data-widget="popup", data-class-name="popup"></div>

// js
new Popup({
  trigger: '#trigger',
  element: '#popup'
})

如上，实例化 popup 的时候如果没有传入 className 会读取 data-api 上的，如果有会取 config 的。

解决方案二

这个方案保留原有的功能，再增加一个属性（_element）指定 data-widget 对应的 DOM。

// auto-render.js
SubWidget.autoRender({
  _element: element,
  element: element,
  renderType: 'auto'
})

// 或
SubWidget.autoRender({
  _element: element,
  trigger: element,
  renderType: 'auto'
})

在 _parseDataAttrsConfig 通过 _element 取到 data-widget 对应的 DOM，如果没有再取 element，实现起来有点恶心。

---

我比较推荐方案一，实现比较清晰。既然是实例化的何必再使用 data-api 呢，我觉得这种使用方式可以去除。在现实场景中有没有这种用法，你们的建议是 @lianqin7 @lifesinger @shaoshuai0102

[lifesinger]

config 的来源有三个：

1. data-api 上的
2. 继承链上的
3. new Xxx 时传入的

之前的逻辑是，三者是覆盖关系，优先级 3 > 2 > 1
这样的好处是灵活，共性化的东西可以放在 data-api 或父类上，个性化的东西放在 new Xxx 时传入

我觉得还是原来的逻辑好呀。

data-widget-role，我的想法是

SubWidget.autoRender({
  initialElement: element,
  renderType: 'auto'
})

然后 autoRender 方法里面，根据 initialElement 来判断究竟是 element 还是 trigger 等。

[popomore]

@lifesinger 就是赞同方案二咯，把 _element 换成 initialElement

[popomore]

还有一个问题，目前 Widget.query 是通过 cid 找实例的，而 cid 是绑在 element 上的。如果 initElement 为 trigger，那 cid 是否应该绑在 trigger 上。

[lifesinger]

嗯，可以让 cid 就绑在 initElement 上。

On Mon, May 13, 2013 at 3:26 PM, Haoliang Gao [email protected]:

还有一个问题，目前 Widget.query 是通过 cid 找实例的，而 cid 是绑在 element 上的。如果 initElement 为
trigger，那 cid 是否应该绑在 trigger 上。

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/26#issuecomment-17796166
.

王保平 / 玉伯（射雕）
送人玫瑰手有余香

[popomore]

整理到文档