Question

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

我想使用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);

Answer 1

我意识到你可能正在做这个进入Backbone的练习，这不是一件坏事，但我觉得你需要一些技巧。

通常集合不与DOM有关。 parse方法用于解析，展平和/或归零您要建模的数据的默认方法。
要处理与DOM相关的操作和事件委托，您将使用Backbone View（字面上是从Backbone.View扩展创建的新实例，但我认为您已经明白了这一点）。

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

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

你如何在这个jQuery插件中使用Backbone.js？

1 个答案: