avalon.oniui icon indicating copy to clipboard operation
avalon.oniui copied to clipboard

组件可否给出一个方式用于获取组件模板所在的 dom 节点?

Open malcolmyu opened this issue 10 years ago • 5 comments

目前组件只有一个 widgetElement 属性,用于获取绑定 ms-widget 的 DOM 节点,但是在有些情况下想获取组件模板所生成的 DOM 节点。

这样做的主要目的是为了进行校验。由于 avalon.validation 采取的方式是在 ms-duplex 后面添加衍生绑定;而对于许多组件来说,其可以使用存在于 DOM 中的 <input> <textarea><select> 来进行生成。如果在这些标签上添加校验,同时又声明组件的话,可能会使某些校验回调无法被触发。

据我观察,大部分组件还是依托于原有 DOM 结构进行展示的,如 colorpick datepicker 等,但是受限于原生 DOM 的展现,还是有部分组件如 dropdown flipswitch 等采取了插入自定义模板而隐藏原生节点的方式。这样如果用户在这些组件的节点上添加校验,将导致 validation 在监听 avalon-ms-duplex-init 事件时只能拿到被隐藏的原生节点,而无法获取到真正的组件模板,也就无法顺利的触发绑定的事件。

这种情况之前与 @ilife5 讨论过,认为比较好的解决方案是将组件的校验移到外层。由于 avalon 1.3.8+ 放开了对 ms-duplex 绑定标签的限制,因此这一解决方案可行。但这种方法多多少少给人造成了一定的困惑和负担 —— 既然组件本身可以采用 ms-duplex 进行双绑,为何无法在上面直接添加衍生绑定进行校验?如果组件能够提供一个获取组件模板本身所在的 DOM 节点的方式,就可以在业务中进行一次规范的封装(如果能直接在 validation 里封装了就更好了= =+),将原有节点的事件重定向到真正的组件模板上,较好的解决这一问题。

malcolmyu avatar Apr 12 '15 08:04 malcolmyu

因为生成的组件是同时对应N个节点,比较弹出层,它有一个div元素做弹出层还有另一个div元素做mask

RubyLouvre avatar Apr 12 '15 11:04 RubyLouvre

@malcolmyu

“把验证放到外层”的真正含义不是说需要放到组件的模板上,所有在controller下的元素上都是可以使用的,比如你可以放到组件元素的父标签上。就像@RubyLouvre所说,放到模板上的可行性比较低。

ilife5 avatar Apr 12 '15 13:04 ilife5

好的,我也觉得这样确实有些不妥,例如 dropdown 里面就存在两个节点,而且分别定位在不同的位置。那我在业务里用重定向到父元素的方式上解决吧。

malcolmyu avatar Apr 13 '15 05:04 malcolmyu

在力神的强烈要求下又重启这个问题=。=……

  • 希望能解决在validation中能检测在被组件所隐藏的原有dom节点中绑定的事件(至少是validation的blur、focus和keyup)是否应该被重定向到组件的dom节点上;
  • 希望组件能够将原有dom结构包裹在组件节点中,在替代的位置仅吐出一个dom节点。

感谢感谢~

malcolmyu avatar Apr 17 '15 03:04 malcolmyu

@malcolmyu ,问题可见:

#595

ilife5 avatar Apr 17 '15 03:04 ilife5