您将如何将 Backbone.js 与这个 jQuery 插件一起使用？

Question

我最近继承了一个严重依赖 Backbone.js 的应用程序。我的应用程序覆盖 Backbone.sync() 函数以使用 Qt（允许应用程序在嵌入桌面应用程序的浏览器中执行 AJAX 请求）；所以，AJAX 最好尽量使用 Backbone。

我想使用 jQuery Treeview 插件here 并使用 Backbone 与我的 API 进行数据交互。为了异步加载节点，这使用了additional plugin，它覆盖了toggle()，使其使用$.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);

Answer 1

我知道您可能正在这样做作为进入 Backbone 的练习，这不是一件坏事，但我确实觉得您需要一些提示。

1. 通常集合不与 DOM 有任何关系。 parse 方法可用于对您要建模的数据进行解析、展平和/或归零的默认方法。
2. 要处理与 DOM 相关的操作和事件委托，您将使用 Backbone View（实际上是从 Backbone.View 扩展创建的新实例，但我想您已经明白了）。

在您的情况下，事情可能会很棘手，因为您可能要处理分层（多级）JSON 数据，而 Backbone 不能开箱即用地处理这些数据。 （也可以说，它不需要，尽管如果开发一些约定来处理这些事情可能会很好。**）This question 处理一些。我认为 Derick Bailey（他回答了这个问题）实际上可能已经编写了一个 Backbone 模块来处理这些事情，但我自己并没有调查过它（特别是他的任何解决方案或那个问题）。 This 可能是指一种特定的解决方案。

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