javascript - 为拖放界面选择 Javascript MVC 框架

Question

用例:我从一个涉及大量客户端脚本的项目开始。它类似于迷你 CMS，用户可以在其中拖放 html 组件。有点类似于 this .现在我处于必须选择 MVC 框架来定义用户将使用的组件的情况。 (执行拖动、调整大小、删除等操作)。

现在我面临的问题是，选择一个易于学习和实现的框架。我有 Javascript 和 jQuery 的基础知识，并且已经使用了一段时间，但没有使用 MVC 的经验。

我过去 2 天的研究表明 backbone.js 是一个很好的开始，但我想就它在处理 html 组件和 DOM 元素方面提供的灵 active 提出评论/建议。如何存储 HTML 组件的初始内容？ (外箱和结构)。

此外，我如何处理同一类型的多个组件？动态生成 Id 是一种选择，但使用动态 id 管理多个元素变得困难。有没有其他方法可以处理它们？

哪个框架可以轻松处理这些组件上的事件？

Answer 1

我将 backbone 用于涉及拖放的 Web 应用程序，并且我使用 jquery ui 来实现拖放功能。它们集成得很好，例如，当你想实现一个可删除的主干 View 时

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;
                }

更新:

有了 Backbone View ，你就有了一个骨架 html 结构，然后随着 Backbone View 的增加而增加。每个 View 都有一个用模型数据渲染的模板您可以在 Backbone Essentials 阅读更多相关信息

我还制作了一个小的 todolist 来演示带有 backbone 的可拖动事件
http://www.github.com/joaoxsouls/todolist