jquery-ui - 如何在 el 或 tagname 上不设置任何内容以使用 jquery ui Accordion

Question

jQueryUI 的 Accordion 的结构是这样的，

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

对于每个项目。我要做的是通过循环在我的主干 View 内创建 Accordion ，但是主干为每个项目创建 div 标签，所以我有这样的 html 代码

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

这使得 jQuery Accordion 控件无法正常工作，折叠和展开也无法正常工作。
我认为如果我不能在 el 或 tagname 上设置任何内容，这可以解决，但我找不到。
有没有办法解决这个问题？

Answer 1

我认为您最好将 Accordion 留在一个 View 中，然后在每个面板内都有一个单独的 View 。毕竟，<h2> s 是 Accordion 整体的控件，而不是特定面板的控件。

你会有一些像这样的面板 View :

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

然后是这样的 Accordion View :

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方法到 P查看然后 A可以询问面板它的名称/标题/标题应该是什么，以便所有面板信息都很好地包含在每个面板 View 中。

演示:http://jsfiddle.net/ambiguous/Y49W8/