Как ничего не устанавливать на el или tagname для работы с jquery ui accordion

Question

Структура Аккордеона в jQueryUI примерно такая:

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

за каждый предмет. То, что я собираюсь сделать, это создать аккордеон внутри моего представления позвоночника с помощью циклов, но основа создать тег div для каждого элемента, поэтому у меня есть HTML-код, подобный этому

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

Это заставляет jQuery Accordion control работать некорректно, разворачиваться и разворачиваться не работает. Я думаю, что это можно решить, если я ничего не могу установить на el или tagname, но я не могу это выяснить. Есть ли способ решить эту проблему?

Answer 1

Я думаю, что вам лучше оставить аккордеон на один вид, а затем иметь отдельный вид внутри каждой панели. В конце концов, <h2>Это элементы управления для аккордеона в целом, а не для конкретной панели.

У вас будет несколько видов для каждой панели:

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 метод к P взгляды, а затем A Можно было бы спросить у панели, какое имя / заголовок / заголовок должно быть, чтобы вся информация для каждой панели была хорошо представлена ​​в представлении для каждой панели.

Демо: http://jsfiddle.net/ambiguous/Y49W8/