你會如何使用Backbone.js與這個jQuery插件？

我最近繼承了一個嚴重依賴Backbone.js的應用程序。我的應用程序將覆蓋Backbone.sync（）函數與Qt一起工作（允許應用程序在嵌入桌面應用程序的瀏覽器中執行AJAX請求）;所以，AJAX最好儘可能使用Backbone。你會如何使用Backbone.js與這個jQuery插件？

我想使用jQuery Treeview插件here並使用Backbone與我的API進行數據交互。要異步加載節點，它使用覆蓋toggle（）的additional plugin，使其使用$ .ajax請求新的節點數據。

在這個插件中使用Backbone是否有意義，以及如何去做這件事？我認爲它會涉及編寫一個直接使用Backbone的替代「異步」插件？

這是我到目前爲止有：

;(function($) { 

var proxied = $.fn.treeview; 
$.fn.treeview = function(settings) { 
    // if (!settings.url) { 
     // return proxied.apply(this, arguments); 
    // } 
    var container = this; 

    var TreeNodeCollection = Backbone.Collection.extend({ 
     url: '/api/subfolder_list', 
     tagName: 'ul', 

     initialize: function() { 
     }, 

     parse: function(response) { 
      container.empty(); 
      $.each(response, this.createNode, [container]); 
     //$(container).treeview({add: container}); 
     }, 

     createNode: function(parent) { 
      var current = $("<li/>").attr("id", this.id || "").html("<span>" + this.text + "</span>").appendTo(parent); 
      if (this.classes) { 
       current.children("span").addClass(this.classes); 
      } 
      if (this.expanded) { 
       current.addClass("open"); 
      } 
      if (this.hasChildren || this.children && this.children.length) { 
       var branch = $("<ul/>").appendTo(current); 
       if (this.hasChildren) { 
        current.addClass("hasChildren"); 
        if (typeof branch.collection == 'undefined') { 
         branch.collection = new TreeNodeCollection(); 
        } 
        branch.collection.createNode.call({ 
         classes: "placeholder", 
         text: "&nbsp;", 
         children:[] 
        }, branch); 
       } 
       if (this.children && this.children.length) { 
        if (typeof branch.collection == 'undefined') { 
         branch.collection = new TreeNodeCollection(); 
        } 
        $.each(this.children, parent.collection.createNode, [branch]) 
       } 
      } 

      $(parent).treeview({add: container}); 
     } 
    }); 

    container.collection = new TreeNodeCollection(); 

    if (!container.children().size()) { 
     container.collection.fetch(); 
    } 
    var userToggle = settings.toggle; 
    return proxied.call(this, $.extend({}, settings, { 
     collapsed: true, 
     toggle: function() { 
      var $this = $(this); 

      if ($this.hasClass("hasChildren")) { 
       var childList = $this.removeClass("hasChildren").find("ul"); 
       //load(settings, this.id, childList, container); 
       container.collection.fetch(); 
      } 
      if (userToggle) { 
       userToggle.apply(this, arguments); 
      } 
     } 
    })); 
}; 

})(jQuery);

來源

2012-05-17 Chad Johnson

什麼阻止你直接在代碼中調用'$ .ajax'？ Backbone.sync沒什麼特別的... – PhD

它與Qt/Webkit相關的東西不兼容。我可以覆蓋$ .ajax，類似於Backbone.sync（）被覆蓋的方式...... –

'Backbone.sync'應該沒問題，但@JayC在他的回答中提出了一些好的觀點。您也可以查看骨幹關係（https://github.com/PaulUithol/Backbone-relational）來幫助維護您的層次結構。 – rjz

我知道你可能做這個作爲一個練習，進入骨幹，這是不是一件壞事，但我覺得你需要一些小技巧。

典型集合不要與DOM有什麼關係。 parse方法可用於解析，展平和/或歸零您想要建模的數據的默認方法。
爲了處理與DOM有關的操作和事件委託，你需要使用Backbone View（從Backbone.View擴展創建的一個新實例，但我認爲你已經明白了）。

在你的情況下，事情可能很棘手，因爲你很可能處理分層（多級）JSON數據，Backbone並沒有直接處理這些數據。（可以說，它不需要，儘管如果開發一些公約來處理這種事情可能會很好。**）This question涉及那個。我認爲Derick Bailey（他回答了這個問題）實際上可能已經編寫了一個Backbone模塊來處理這些事情，但是我自己並沒有調查過它（他的任何解決方案或特定問題）。 This可能是參考一個特定的解決方案。

**這並不是說沒有任何約定已經存在，我只是不知道任何約定。

來源

2012-05-17 20:45:59 JayC

你會如何使用Backbone.js與這個jQuery插件？

回答

相關問題