为拖放界面选择 Javascript MVC 框架答案

【问题标题】：Choosing a Javascript MVC framework for a drag and drop interface为拖放界面选择 Javascript MVC 框架
【发布时间】：2012-11-25 13:35:11
【问题描述】：

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

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

我过去 2 天的研究表明 backbone.js 是很好的开始，但我希望 cmets/suggestions 关于它在处理 html 组件和 DOM 元素方面提供的灵活性。如何存储 HTML 组件的初始内容？（外箱和结构）。

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

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

【问题讨论】：

标签： javascript backbone.js javascript-framework backbone-events javascriptmvc

【解决方案1】：

我将主干用于涉及拖放的 Web 应用程序，并且我使用 jquery ui 来实现拖放功能。例如，当您想要实现可放置的主干视图时，它们与 imo 集成得很好

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

更新：

使用主干视图，您有一个骨架 html 结构，然后随着主干视图递增。每个视图都有一个使用模型数据呈现的模板你可以在Backbone Essentials阅读更多关于它的信息

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

【讨论】：

Oliveira 感谢您的输入。您能告诉我如何存储应用程序加载时将加载的初始 html 吗？即我有一个文本组件，因此它的结构将是 <div id="guid">(Other editor features)</div>，将在哪里当我单击菜单或将其拖动到画布上时，它最初会被存储和调用？另外，我如何处理相同类型的多个组件？动态生成 ID 是一种选择，但使用动态 ID 管理多个元素变得困难。 der 有没有其他方法可以处理它们？
如果你可以看看app.imcreator.com这个链接，它将帮助你更好地理解我的问题。
再次感谢
@Oliveira 所以，我想使用的每个组件在开始时都是一个视图，对于相同类型的多个组件，将创建多个视图。我说对了吗？？如果可能的话，你能给我举个例子吗？感谢您到目前为止的帮助。
我可以给你做个例子，有时间会贴出来
对不起，我没有忘记，只是我没有时间，从今天开始我会有更多的时间，我会做的

【解决方案2】：

为什么要使用 BackboneJS？

如果它不是必需品，而你只是想要一个拖放界面，你可能想看看这个：http://omshankar.kodingen.com/engine-1.73/
JavaScript 已被最小化，仅使其成为单行。函数和变量都是完整的，在Chrome中点击Sources中的{}可以看到

如果这是非常必要的，您绝对可以在主干中拖放。唯一的问题是，每次调用时，您可能都必须在 item 的 render 函数中再次初始化拖放。
关于拥有HTML 结构、外盒和组件，请按照您想要的方式制作您的HTML。可以办到。一个示例 Backbone 应用程序：http://omshankar.kodingen.com/exp/backbone-html5-dd/

它也有一个拖放功能，但那是将图像文件从您的操作系统拖到浏览器中，而不是您的相关性

如果您想存储 HTML，您可以通过本地存储来完成，或者将其保存在您的 HTML 文件中。仅对动态部分应用/制作主干视图

【讨论】：

感谢您的输入。是的，它不是必需的，它可以使用 jquery 来实现。但是，我已经提到了 website 我想要实现的目标。它是一个复杂的系统，我相信一些 MVC 类型的 FWrk 会帮助我简化它。另外，我经历了一些继承模式，比如 class.js，它们看起来很适合我的场景。你能帮我解决这个问题吗实现继承模式。我只想知道如何将常见事件（如关闭盒子）分开。它们将是函数，但使用this关键字调用它们
用this 关键字调用函数，就像更改上下文-bindCtx = function(fun, self){ return function(){ return fun.apply(self, arguments); }; }; 。 Backbone 还使用 MVC 为您提供模板。对于基于class 的简单解决方案，my-class 将是最简单的，学习曲线更短。分开常见事件不应该是唯一迫使您选择Backbone，imo
不是，我必须选择使用框架来简化开发周期。我不限于backbone.js，但一些在线研究表明它是最好的选择之一。但是，后来我了解到class.js 是由一个很棒的谷歌人写的，这似乎非常灵活，可以使用this 实现inheritance。我仍在学习它并探索使开发过程尽可能简单和顺利的可能性。虽然我没有那么经验丰富的架构，因此寻求一些帮助

【解决方案3】：

我建议Angular JS？它具有出色的绑定和指令功能。

【讨论】：

您能否在我提到的查询中添加更多信息，例如如何最初存储 HTML 并在某些事件中调用它？

【解决方案4】：

AngularJS 很棒，尤其是如果你将它与 ConversationJS 之类的东西结合使用：

https://github.com/rhyneandrew/Conversation.JS

我不太喜欢“意大利面条”棱角的感觉，而 Conversation 允许您在不改变其工作方式的情况下将其中的大部分解耦。它使代码库更加干净。

【讨论】：