Рефакторинг Me: Backbone.js Оптимизация рендеринга подвидов

Question

Я работаю над одностраничным приложением с Backbone.js v0.5.5, и на одной «странице» приложения у меня есть Master View (audioOnDemand) и два Secondary Views (audioPlay и audioNav).Я хотел, чтобы вторичные представления были маршрутизируемыми, чтобы пользователь мог, например, перейти к «#audio_ondemand», «# audio_ondemand / id /: id» или «# audio_ondemand / page /: page» и все загрузилось,Для того, чтобы это сделать, мне пришлось добавить некоторый код jQuery в мои контроллеры / маршрутизаторы, что было очень странно.Вот почему я здесь, чтобы увидеть, есть ли лучший способ.

Вот мои контроллеры / маршрутизаторы.

audio_ondemand: function(splat) {
    this._audioondemandview = new AudioOnDemandView();
    this._audioondemandview.render();

    if (splat) {
        var id_patt = /id\/(\d*)/i;
        var id = id_patt.exec(splat);
        id = (id) ? id[1] : null;
        //console.log("id is: "+id);

        var page_patt = /^page\/(\d*)/i;
        var page = page_patt.exec(splat);
    }
    page = (page) ? page[1] : 1;
    //console.log("page is: "+page);

    if (id) {
        setTimeout('app.play_audio("'+id+'");', 500);
    }

    setTimeout('app.audio_nav("'+page+'");', 500);
},

audio_nav: function(page) {
    var nav_holder = $('#pagination-nav');
    if (nav_holder.length == 0) {
        app.audio_ondemand('page/'+page);
    } else {
        var audios = this._audios;
        var nav = new AudioNavView({el: nav_holder, audios: audios, page: page});
        nav.render();
    }
},

play_audio: function(id) {
    var audio_holder = $('#audio-player');
    if (audio_holder.length == 0) {
        app.audio_ondemand('id/'+id);
    } else {
        var audio = this._audios.getByUid(id);
        this._audioview = new AudioView({el: $('#audio-player'), model: audio});
        this._audioview.render();
    }
}

Представления не делают ничего особенно особенного, но вот мои'основной' шаблон (с использованием шаблонов jQuery):

<script id="audioOnDemandTmpl" type="text/x-jquery-tmpl">
    <div class="sub-header">
        <strong>Audio</strong> On Demand
    </div>
    <div id="currently-playing">
        <div id="currently-header">Currently Playing</div>
        <div id="current-holder"></div>
    </div>
    <div id="audio-player"></div>
    <div id="pagination-nav"></div>
    <div id="audios-holder"></div>
</script>

Я бы предположил, что теперь вы получаете дилемму.Главное представление должно быть отображено перед вторичными представлениями, иначе вторичные представления не имеют надлежащих элементов DOM для присоединения.Но если я хочу, чтобы вторичные представления были маршрутизируемыми, я должен выполнить «хакерскую» проверку jQuery, чтобы увидеть, было ли отредактировано главное представление.

Оцените любые мысли или предложения и дайте мне знать, есливам нужно больше деталей!

ОБНОВЛЕНИЕ : поскольку это может помочь лучше понять идею, вот навигационное представление и шаблоны.

<script id="audioNavTmpl" type="text/x-jquery-tmpl">
    {{if prev > 0}}<a href="#audio_ondemand/page/${prev}">Prev</a> | {{/if}}${current}{{if next}} | <a href="#audio_ondemand/page/${next}">Next</a>{{/if}}
</script>

<script id="audioTmpl" type="text/x-jquery-tmpl">
    <div class="audio-holder">
        <div class="title-author">
            <div class="title"><a href="#audio_ondemand/id/${attributes.uid}">${attributes.title}</a></div>
            <div class="author">${attributes.author}</div>
        </div>
        <div class="topic-date">
            <div class="topic"><strong>${attributes.topic}</strong></div>
            <div class="date">${attributes.date}</div>
        </div>
    </div>
</script>

var AudioNavView = Backbone.View.extend({
audioNavTemplate: $('#audioNavTmpl').template(),
audioTemplate: $('#audioTmpl').template(),

initialize: function(options) {
    this.audios = options.audios.models;

    var temp_page = parseInt(options.page);
    this.page = [
        {
            prev: temp_page - 1,
            current: temp_page,
            next: temp_page + 1
        }
    ];

    this.slice_start = (temp_page - 1) * 11;
    this.slice_end = temp_page * 11;

    this.audios = this.audios.slice(this.slice_start, this.slice_end);

    if (this.audios.length <= 11) {
        this.page[0]["next"] = false;
    }
},

render: function() {
    //console.log(this.page);
    this.el.empty();
    var sg = this;
    $('#audios-holder').fadeOut('fast', function() {
        $.tmpl(sg.audioNavTemplate, sg.page).appendTo(sg.el);
        $(this).empty();
        $.tmpl(sg.audioTemplate, sg.audios).appendTo($(this));
        $(this).fadeIn('fast');
    });
    return this;
}

});

Как мне установить это лучше, чтобы, если кто-то перешел прямо с '#home' на '# audio_ondemand / page / 2', маршрутизатор обязательно загрузил audioOnDemandView перед audioNavView?

Answer 1

Насколько я могу судить, ваши вложенные представления имеют глубину только 1 уровень (т.е. главный вид с вложенными представлениями, но не с какими-либо вложенными представлениями), поэтому вы можете решить свою проблему, отобразив свой главный вид вметод initialize вашего маршрутизатора, а затем рендеринг любых вложенных представлений в обратных вызовах маршрута.Вот очень простой пример.Я использую шаблонизатор подчеркивания, но идея аналогична шаблонизатору jQuery.

Шаблоны:

<script id="master-view" type="text/html">
    Hi, this is a master view. <a href="#subview">Render sub-view now.</a>
    <div id="subview-container"></div>
</script>
<script id="sub-view" type="text/html">
    Hi, this is a sub view.
</script>

Магистральные представления и Маршрутизатор

var MasterView = Backbone.View.extend({
    _template: _.template($('#master-view').html()),
    render: function () {
        $(this.el).html(this._template());
        return this;
    }
});

var SubView = Backbone.View.extend({
    _template: _.template($('#sub-view').html()),
    render: function () {
        $(this.el).html(this._template());
        return this;
    }
});

var MyRouter = Backbone.Router.extend({

    initialize: function () {
        var view = new MasterView();
        $('body').append(view.render().el);
    },

    routes: {
        '': 'home',
        'subview': 'subview'
    },

    home: function () {
        // probably don't have to do anything
    },

    subview: function () {
        // render subview here
        var view = new SubView({ el: $('#subview-container')[0] });
        view.render();
    }
});

new MyRouter();
Backbone.history.start();

КогдаВы указываете браузеру на страницу, сначала вы увидите только основной видНажмите на ссылку, и вы увидите изменение хеша URL на #subview, и подпредставление будет отображено.Затем вы можете перезагрузить страницу (с хешем URL-адреса по-прежнему в #subview), и вспомогательное представление будет правильно отображено после основного представления.