1

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

我想在这里使用 jQuery Treeview 插件并使用 Backbone 与我的 API 进行数据交互。为了异步加载节点，这使用了一个覆盖 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);
4

1 回答 1

0

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

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

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

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

于 2012-05-17T20:45:59.363 回答