Jquery plugins 如何将Backbone.js与这个jQuery插件结合使用？

我最近继承了一个严重依赖Backbone.js的应用程序。我的应用程序覆盖Backbone.sync（）函数以与Qt一起工作（允许应用程序在嵌入桌面应用程序的浏览器中执行AJAX请求）；因此，最好在AJAX中尽可能多地使用主干网

我想使用jQueryTreeView插件并使用主干与我的API进行数据交互。要异步加载节点，这将使用which overrides toggle（），从而使用$.ajax请求新节点数据

在这个插件中使用主干网有意义吗？你会怎么做？我想这会涉及到编写一个直接使用主干的“异步”插件

以下是我到目前为止的情况：

;(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);

；（函数（$）{
代理变量=$.fn.treeview；
$.fn.treeview=函数（设置）{
//如果（！settings.url）{
//返回proxied.apply（这个，参数）；
// }
var容器=这个；
var TreeNodeCollection=Backbone.Collection.extend({
url:“/api/子文件夹列表”，
标记名：“ul”，
初始化：函数（）{
},
解析：函数（响应）{
container.empty（）；
$.each（响应，this.createNode，[container]）；
//$（container.treeview（{add:container}）；
},
createNode:函数（父级）{
var current=$（“
”）attr（“id”，this.id | |？”）.html（“+this.text+”）.appendTo（父级）；
如果（这个类）{
当前.children（“span”）.addClass（本.classes）；
}
如果（这个扩展）{
当前添加类别（“开放”）；
}
if（this.haschilds | | this.children&&this.children.length）{
var分支=$（“
”）。附录（当前）；
如果（这个有孩子）{
current.addClass（“hasChildren”）；
if（typeof branch.collection==“未定义”）{
branch.collection=new TreeNodeCollection（）；
}
branch.collection.createNode.call({
类：“占位符”，
正文：“，
儿童：[]
}，分行）；
}
if（this.children&&this.children.length）{
if（typeof branch.collection==“未定义”）{
branch.collection=new TreeNodeCollection（）；
}
$.each（this.children，parent.collection.createNode，[branch]）
}
}
$（父）.treeview（{add:container}）；
}
});
container.collection=new TreeNodeCollection（）；
如果（！container.children（）.size（））{
container.collection.fetch（）；
}
var userToggle=settings.toggle；
返回proxied.call（此，$.extend（{}，设置{
对,，
切换：函数（）{
var$this=$（this）；
if（$this.hasClass（“hasChildren”））{
var childList=$this.removeClass（“haschilds”）.find（“ul”）；
//加载（设置、this.id、childList、容器）；
container.collection.fetch（）；
}
如果（用户切换）{
userToggle.apply（这个，参数）；
}
}
}));
};
})（jQuery）；

我意识到你这样做可能是为了锻炼脊柱，这不是一件坏事，但我确实觉得你需要一些技巧

通常，集合与DOM无关。

parse

方法用于解析、展平和/或归零您想要建模的数据的默认方法

要处理与DOM相关的操作和事件委派，您需要使用主干视图（实际上是从Backbone.View扩展创建的新实例，但我认为您已经了解了这一点） 在您的情况下，事情可能很棘手，因为您可能要处理分层（多级别）JSON数据，而主干网不会处理开箱即用的数据。（可以说，它也不需要这样做，尽管如果制定一些公约来处理这些事情可能会更好。**）处理一些问题。我认为Derick Bailey（他回答了这个问题）实际上可能已经编写了一个主干模块来处理这些事情，但我自己并没有研究过（他的任何解决方案，尤其是那个问题）。可参考一个特定的解决方案

---

**这并不是说没有任何约定，我个人不知道有任何约定。

是什么阻止您直接在代码中调用

$.ajax

？Backbone.sync没有什么特别之处…它与Qt/Webkit相关的内容不兼容。我可以像覆盖Backbone.sync（）一样覆盖$.ajax…

Backbone.sync

应该可以，但是@JayC在他的回答中提出了一些好的观点。您还可以签出主干关系（）来帮助维护您的层次结构。