為拖放界面選擇 Javascript MVC 框架

Question

用例：我從一個涉及大量客戶端腳本的項目開始。 它類似於迷你 CMS，用戶可以在其中拖放html 組件。 有點類似於這個。 現在我處於必須選擇 MVC 框架來定義用戶將使用的組件的情況。 （執行拖動、調整大小、刪除等操作）。

現在我面臨的問題是，選擇一個易於學習和實施的框架。 我有 Javascript 和 jQuery 的基礎知識並且已經使用了一段時間，但沒有使用 MVC 的經驗。

我過去 2 天的研究表明backbone.js是一個很好的開始，但我想就它在處理 html 組件和 DOM 元素方面提供的靈活性提出意見/建議。 如何存儲 HTML 組件的初始內容？ （外箱和結構）。

另外，如何處理同一類型的多個組件？ 動態生成 Id 是一種選擇，但使用動態 id 管理多個元素變得困難。 有沒有其他方法可以處理它們？

哪個框架可以輕松處理這些組件上的事件？

Answer 1

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

更新：

使用主干視圖，你有一個骨架 html 結構，然后隨着主干視圖增加。 每個視圖都有一個用模型數據呈現的模板，您可以在Backbone Essentials閱讀更多相關信息

我還制作了一個小的 todolist 來演示帶有 backbone 的可拖動事件
http://www.github.com/joaoxsouls/todolist

Answer 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 文件中。 僅將 Backbone 視圖應用到那些動態的部分

Answer 3

我建議使用 Angular JS ？ 它具有強大的綁定和指令功能。

Answer 4

AngularJS 很棒，尤其是當你將它與 ConversationJS 之類的東西結合使用時：

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

我不太喜歡“意大利面條式”棱角分明的感覺，Conversation 允許您在不改變其工作方式的情況下解耦相當多的部分。 它使代碼庫更加清晰。