How to set nothing on el or tagname to work with jquery ui accordion

问题

Structure of jQueryUI's Accordion is something like this,

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

for each item. What I am going to do is create accordion inside of my backbone view through looping, but backbone create div tag for each item so I have html code like this

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

This makes jQuery Accordion control does not work correctly, collapse and expand is not working. I think this can be solved if I can set nothing on el or tagname, but I cannot find out. Is there any way to solve this problem?

回答1:

I think you'd be better off leaving the accordion to one view and then have a separate view inside each panel. After all, the <h2>s are controls for the accordion as-a-whole rather than for a specific panel.

You'd have some per-panel views like this:

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

And then an accordion view like 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;
    }
});

Then you can simply $('#something').append((new A).render().el) and it all works out nicely while leaving everything where it should be.

You could also add a title method to the P views and then A could ask the panel what its name/title/header should be so that all the per-panel information is nicely contained in the per-panel view.

Demo: http://jsfiddle.net/ambiguous/Y49W8/

来源：https://stackoverflow.com/questions/10809771/how-to-set-nothing-on-el-or-tagname-to-work-with-jquery-ui-accordion

标签

jquery-ui

backbone.js

jquery-ui-accordion