为拖放界面选择javascript MVC框架

Kil*_*Bug 4 javascript javascript-framework javascriptmvc backbone.js backbone-events


USECASE:我从一个涉及大量客户端脚本的项目开始.它类似于一个迷你CMS,用户可以拖放 html组件.有点类似于.现在我处于这样一种情况,我必须选择一个MVC框架来定义用户将要处理的组件.(执行拖动,调整大小,删除等操作)
现在 我面临的问题是,在选择框架时很容易学习和实现.我有javascript和jquery的基本知识,并且已经使用了一段时间,但没有使用MVC的经验.
我在过去2天的研究表明,backbone.js很适合开始,但我希望对处理html组件和DOM元素的灵活性提出意见/建议.如何存储HTML组件的初始内容?(外盒)和结构).
另外,我如何处理相同类型的多个组件?动态生成Id是一个选项,但是使用动态ID管理多个元素很困难.是否可以处理它们的任何其他方式?
哪个框架可以轻松处理这些组件上的事件?
谢谢你的时间

jxs*_*jxs 7

我使用骨干网作为一个涉及拖放的网络应用程序,我使用jquery ui来实现拖放功能.例如,当您想要实现可放置的骨干视图时,它们可以非常好地集成

render: function(){
    var $el = this.$el,
        over = false,
        origWidth;


       if (!this.$el.is('.ui-sortable'))
            this.$el.sortable({
                revert: false,
                axis: 'y',
                placeholder: 'placeholder',
                items: '.load-order',
                containment: this.el,
                receive: this.onOrderDrop,
                over: this.onOrderOver
                out: function(e, ui){
                    // Resize back to original width
                    if (over && ui.helper)
                        ui.helper.stop().animate({width: origWidth}, 'fast');
                    over = false;
                }
Run Code Online (Sandbox Code Playgroud)

更新:

在骨干视图中,您有一个骨架html结构,然后通过骨干视图递增.每个视图都有一个模板,该模板使用模型数据进行渲染,您可以在Backbone Essentials中阅读更多相关信息

我还做了一个小型的todolist来展示主干的可拖动事件
http://www.github.com/joaoxsouls/todolist