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

表单编辑器开发工作笔记 #14

Open
abeet opened this issue Jun 7, 2016 · 0 comments
Open

表单编辑器开发工作笔记 #14

abeet opened this issue Jun 7, 2016 · 0 comments

Comments

@abeet
Copy link
Owner

abeet commented Jun 7, 2016

基本思路:

1、表单工具使用MVVM框架实现是合适的,目前的MVVM框架只有Avalon.js兼容IE6,体积也小巧,就用Avalon了。
3、参考现有成熟在线表单制作工具,主要参考其交互方式。
4、如果调研的在线表单制作工具中有基于MVVM的实现,代码亦可参考。

代码实现

  • Avalon里各个vm必须有唯一id,先要考虑哪些做成普通vm,哪些设计成组件。插入到表单区的表单项当然是要设计成组件的,Avalon1.5以后组件的实现方式改了,先学一下。
  • 刚开始Avalon用的是1.5.4,结果组件的配置传不进去,坑!向作者提交了bug,作者作了修正,才正常。小框架的问题是没有经过严密的测试,优点倒是直接和作者交流,反馈快。
  • 拖拽相关的操作用jquery UI,开始用jquery 1.11.4,draggable方法的appendTo参数没有正常生效,坑!!没想到知名框架也有这样的bug,退回jqueryUI到1.10.4,终于正常。jQueryUI作者我可交流不了,要么换版本,要么自己改bug吧。
  • 各组件的实现代码有很多相似的,但为了代码层级少、结构清晰,并没有合并。我认为代码可读可维护与代码量上作取舍时,优先代码可读可维护。
  • ZCMS中的校验控件、日期控件在bootstrap推荐的样式下,需要作一些调整,以符合bs的风格。判断页面有没有引用bootstrap相关样式,我认为比较可靠的是测试form-control-feedback是不是绝对定位
    if($('').appendTo(document.body).css('position')=='absolute'){}
    如果要判断是否有引用bootstrap的组件js,我觉得用 if($.event.special.bsTransitionEnd)
  • 把常用表单组件实现后,再用avalon实现一个等级星控件,代码量很少,不错,可作示例给同事们讲讲MVVM。
  • 实现组件拖拽设计表单后,呈现表单是个问题,应该作为配置传入,在此对数据结构作了较大调整,在编码之前如能够多考虑一下,组件在编辑与呈现两种状态下的如何初始化为佳。
  • 新建表单时,如果从已有模板开始,表单设计工作量会少很多,在前面的工作基础上准备一些表单构建数据即可。
  • 一个小坑,记一下,avalon修改元素的data-xxxx属性值后,用jquery.data('xxxx')取的仍然是原来的值,需要用jauery.attr('data-xxxx')才能取到新值。

三、最终效果
1、编辑

2、模板选择

3、预览

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

1 participant