backbone.js 为拖放界面选择Javascript MVC框架

hlswsv35  于 2022-11-10  发布在  Java
关注(0)|答案(4)|浏览(126)

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

现在我面临的问题是,选择一个容易学习和实现的框架。我有Javascript和jQuery的基本知识,已经使用了一段时间,但没有MVC的经验。
我在过去两天的研究表明backbone.js是一个很好的开始,但是我想对它在处理html组件和DOM元素方面的灵活性提出意见/建议。我如何存储HTML组件的初始内容?(外部框和结构)。
另外,我如何处理相同类型的多个组件?动态生成ID是一个选项,但管理多个具有动态ID的元素变得很困难。有没有其他方法可以处理它们?
哪个框架可以轻松处理这些组件上的事件?

gzjq41n4

gzjq41n41#

我使用backbone来实现一个需要拖放的web应用,我使用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;
                }

更新:
有了 Backbone.js 视图,你就有了一个框架html结构,然后随着 Backbone.js 视图的增加而增加。2每个视图都有一个模板,它是用模型数据呈现的,你可以在Backbone Essentials上阅读更多关于它的信息
我还制作了一个小todolist来演示可拖动的事件
http://www.github.com/joaoxsouls/todolist

fae0ux8s

fae0ux8s2#

为什么要使用BackboneJS?
如果这不是必需的,而您只是想要一个拖放界面,您可能需要看看这个:http://omshankar.kodingen.com/engine-1.73/
JavaScript已经被最小化,使其成为单行。函数和变量都是完整的,在Chrome中可以通过点击Sources中的{}来查看
如果这是一个极端的必要性,你肯定可以有拖放在 Backbone 。唯一的事情是,你可能要初始化一个拖放再次在itemrender函数,每次调用它。
关于HTML的结构、外箱和组件,让你的HTML成为你想要的样子。这是可以做到的。一个示例 Backbone.js 应用:http://omshankar.kodingen.com/exp/backbone-html5-dd/
它也有一个拖放,但这是拖动图像文件从您的操作系统到浏览器,而不是你的相关性
如果你想存储HTML,你可以通过本地存储来实现,或者直接在你的HTML文件中实现。

00jrzges

00jrzges3#

我建议Angular JS?它有很好的绑定和指示性功能。

fxnxkyjh

fxnxkyjh4#

AngularJS非常棒,尤其是如果你把它和ConversationJS这样的东西结合起来:
https://github.com/rhyneandrew/Conversation.JS
我不太喜欢“意大利面条”的棱角感,而Conversation允许你在不改变它工作方式的情况下解耦它,它使代码库变得更干净。

相关问题