Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

关于进行尺寸同步和事件同步以及数据同步更新的建议 #35

Open
pierrewrs opened this issue May 23, 2013 · 10 comments
Open

Comments

@pierrewrs
Copy link

mmonitormng 这个系统最近使用了该select组件 不过因为是后引入的 而原有select的业务逻辑使用较复杂,有vm预先载入的,有JS动态创建或者options插入的,以及后续交互过程中需要动态更新options的;通过在TTI之后查找所有select元素并逐个进行对象实例化,目前可以正常使用,但是因为原元素宽高各不相同,会导致页面大面积的rerender,另外原有的select的事件绑定和options状态(选中、新增)更新都无法同步到select组件上,目前尺寸问题通过全局设定高优先级样式应用固定值临时解决了,事件和数据的同步只能逐个改原有代码了…
希望可以支持实现以上问题,实现事件双向通知或数据双向同步,达到透明替换原始元素的目标~

@popomore
Copy link
Member

先给个具体的实例吧

@popomore
Copy link
Member

话说为啥要修改原有的原生 select,用了这个组件就可以当成原生的用。有 addOption removeOption 的操作,有 set 各种属性的操作。

@pierrewrs
Copy link
Author

就是不想用原生select 想让这个ui-select来完全代替啊 可是现在就是没法透明替换啊

透明替换 组件对用户不可见 用户无需关心才对

比如理想中的 shim ie8 、 es5-shim 啊

@popomore
Copy link
Member

如何没法透明替换?

@pierrewrs
Copy link
Author

https://mmonitormng.alipay.com/exhibit/merchants.htm 域帐号登录看源码
现在ui-select的宽度不能实现和native select的宽度保持一致,目前是设的固定值呢
native select在原始逻辑中会多次需要reset selected状态,这步操作ui-select能不能检测到并自动更新自身呢? 现在是全局变量查找后调用接口再执行更新的
透明的意思似乎很难理解 =。= 解释起来也费事 现在这样不知道还说明白了没

@pierrewrs
Copy link
Author

咱们这个有参考这个 widget 不?
https://github.com/pixeldrew/jqueryui-selectmenu
demo
http://fiddle.jshell.net/fnagel/GXtpC/show/light/
然后监听DOM的变化后触发组件的重新初始化 :)

@popomore
Copy link
Member

popomore commented Jun 5, 2013

native select在原始逻辑中会多次需要reset selected状态

这个 reset 是由谁做的,希望的是单项同步,是从组件向原生 select 同步(第一次会从原生 select 读一次),双向的比较容易混乱,轮询什么的弊大于利。

现在ui-select的宽度不能实现和native select的宽度保持一致

现在 select 会根据浮层的宽度去设置 trigger 的宽度(这个可以考虑再优化下),用原生 select 的宽度也不靠谱,因为大部分用这个组件的都希望定制样式,所以必然会不一样。

@popomore
Copy link
Member

popomore commented Jun 5, 2013

保持透明我也同意,但如何做才是真正要讨论的。

我觉得暴露给用户的应该是组件,而不是原生 select,任何操作都可以通过组件去做。包括同步,比如选中某项后,原生 select 的 selectIndex 也会改变,这样提交表单不需要考虑 select 的状态。

@pierrewrs
Copy link
Author

难怪,思路不同哈哈

我觉得用户应该是可以自由选择使用native方式还是dummy方式的
你参考一下那个selectmenu的实现看看呢? ARIA做的不错的 鼠标键盘各种操作都很好 :)

我作为用户会比较喜欢操作原生的select元素 然后自身弄一套机制去re_init一下模拟组件 比如selectmenu的话就是各个实例监听到DOM的change后再重新执行selectmenu()一次;又或者在全局做替换初始化的时候提供一个全局的再初始化方法,在整个页面rerender的时候调用

宽度的问题 我觉得就是可以简化为trigger和原生元素等宽处理啊 这个应该比较好改 过两天闲一点要不我来push一下
当然本身可以实现初始化参数定制宽高哈

@popomore
Copy link
Member

popomore commented Jun 5, 2013

初始化是 ok,现在也会根据 select 初始状态。但这种双向同步会混乱的

  1. 一方面,js 操作原生 select,组件去监听
  2. 一方面,用户操作组件,然后又要同步状态到 select

所以我觉得组件尽量提供好的 api,可以不用去操作原生的。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants