Refactor Me：Backbone.js子视图渲染优化

Question

我正在使用Backbone.js v0.5.5处理单页应用程序，并且在应用程序的一个“页面”上有一个Master View（audioOnDemand）和两个辅助视图（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元素。但是，如果我希望次要视图可路由，则必须执行'hacky'jQuery检查以查看主视图是否已呈现。

感谢您的任何想法或建议，并让我知道如果您需要更多的细节！

UPDATE：因为它可能有助于更好地给出这个想法，下面是导航视图和模板。

<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'，路由器会确保在audioNavView之前加载audioOnDemandView？

Answer 1

据我所知，你的嵌套视图只有1层深（即一个带有子视图的主视图，但没有任何子视图），所以你可以通过渲染你的主视图来解决你的问题在路由器的初始化方法中，然后渲染路由回调中的任何子视图。这是一个非常简单的例子。我使用了下划线的模板引擎，但这个想法与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(); 

当您将浏览器指向的页面，你会首先看到的只是主视图。点击链接，你会看到#subview的URL哈希改变，子视图将被渲染。然后，您可以重新加载页面（URL散列仍然在#subview处），并且子视图将在主视图正确后呈现。