1

最近、Backbone.js に大きく依存するアプリケーションを継承しました。私のアプリケーションは Backbone.sync() 関数をオーバーライドして Qt で動作します (アプリケーションがデスクトップ アプリケーションに埋め込まれたブラウザーで AJAX 要求を実行できるようにします)。そのため、AJAX にはできるだけ Backbone を使用することをお勧めします。

ここでjQuery Treeview プラグインを使用し、Backbone を使用してデータ用の API とやり取りしたいと思います。ノードを非同期的にロードするために、これはtoggle() をオーバーライドする追加のプラグインを使用し、$.ajax を使用して新しいノード データを要求します。

このプラグインで 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 データを処理する可能性が高いため、扱いが難しい可能性があります。(また、間違いなく、その必要はありませんが、そのようなことを処理するためにいくつかの規則が開発された場合は良いかもしれません.**) この質問はそのいくつかを扱います. Derick Bailey (その質問に答えた人) は実際にそのようなことに対処するための Backbone モジュールを作成した可能性があると思いますが、私はそれ (彼の解決策または特にその問題) を自分で調査していません。これは、1 つの特定のソリューションへの参照である可能性があります。

** これは、まだ規約が存在しないと言っているわけではありません。私が個人的に何も知らないだけです。

于 2012-05-17T20:45:59.363 に答える