4

jQueryUIのアコーディオンの構造は次のようなものです。

<h2>title</h2><div>content</div>

アイテムごとに。私がやろうとしていることは、ループを介してバックボーンビュー内にアコーディオンを作成することですが、バックボーンは各アイテムのdivタグを作成するので、このようなhtmlコードがあります

<div><h2>title</h2><div>content</div></div>

これにより、jQueryアコーディオンコントロールが正しく機能せず、折りたたみと展開が機能しなくなります。elやtagnameに何も設定できなければ解決できると思いますが、わかりません。この問題を解決する方法はありますか？

4

1 に答える 1

2

アコーディオンを1つのビューに残してから、各パネル内に個別のビューを配置する方がよいと思います。結局のところ、<h2>sは、特定のパネルではなく、アコーディオン全体のコントロールです。

次のようなパネルごとのビューがあります。

var P = Backbone.View.extend({
    render: function() {
        // Add the panel's content to this.$el (which is a <div> by default).
        return this;
    }
});

そして、次のようなアコーディオンビュー：

var A = Backbone.View.extend({
    render: function() {
        var panels = [ ... ];
        for(var p, i = 0; i < panels.length; ++i) {
            p = new P({ ... });
            this.$el.append('<h3><a>' + panels[i] + '</a></h3>');
            this.$el.append(p.render().el);
        }

        // The accordion wants to know the sizes of things so
        // we let the DOM sort itself out before binding the
        // accordion.
        var _this = this;
        setTimeout(function() { _this.$el.accordion() }, 0);

        return this;
    }
});

そうすれば、簡単$('#something').append((new A).render().el)にできます。すべてを適切な場所に残しながら、すべてがうまく機能します。

ビューにtitleメソッドを追加してから、その名前/タイトル/ヘッダーをパネルに尋ねて、パネルごとのすべての情報がパネルごとのビューに適切に含まれるようにすることもできます。PA

デモ： http： //jsfiddle.net/ambiguous/Y49W8/

于 2012-05-30T04:22:31.747 に答える