BackboneJS避免重新渲染

问题描述：

我有一个大型路由器的Backbone应用程序。我使用Backbone Layout Manager来加载不同的布局，具体取决于我所在的子页面。我的问题是，每当子页面被渲染时，我的顶部导航会再次呈现。那么我该如何避免这种情况呢？BackboneJS避免重新渲染

我的路由器：

routes: { 
    '': 'index', 
    'home': 'home',  
    ':name' : 'artistchannel', 
    ':name/' : 'artistchannel', 
    ':name/videoes': 'artist_videos', 
    ':name/videoes/': 'artist_videos', 
    ':name/videoes?w=:videoid' : 'artist_videos', 
    ':name/releases': 'artist_discography', 
    ':name/releases/': 'artist_discography', 
    ':name/merchandise' : 'artist_merchandise', 
    ':name/concerts': 'artist_concerts' 
}, 

artistchannel: function (params) { 
    artistController.initArtist(params.name); 
}, 
artist_discography: function(params){ 
    artistController.initDiscography(params.name); 
}, 
and so on...

然后我会为每个路径（这里的艺术家和唱片页）控制器：

ArtistController.prototype.initArtist = function(name) { 
    this.artistModel = new ArtistModule.Model({slug: name}); 
    this.artistModel.fetch(); 
    this.artistModel.on('sync', function(){ 
     this.artistView = new ArtistModule.View({model: this.artistModel}); 
     App.useLayout('artistchannel', 'artistchannel').setViews({ 
      '.userMenu': this.acuserNav, 
      '.artistChannelDiv': this.artistView 
     }).render(); 
    }, this); 
    window.scrollTo(0,0); 
}; 

ArtistController.prototype.initDiscography = function(name) { 
    this.artistdiscographyModel = new ArtistDiscographyModule.ArtistDiscographyModel({slug: name}); 
    this.artistdiscographyModel.fetch(); 
    this.artistdiscographyModel.on('sync', function() { 
     this.artistDiscographyView = new ArtistDiscographyModule.View({model: this.artistdiscographyModel}); 
     App.useLayout('artistDiscography', 'artistDiscography').setViews({ 
      '.userMenu': this.acuserNav, 
      '.releasesDiv' : this.artistDiscographyView 
     }).render(); 
    }, this); 
    window.scrollTo(0,0); 
};

也是一样的演唱会，商品等

所有的子页面（在这个例子中是artistchannel.html和artistDiscography.html）在HTML中都有相同的菜单，我想避免它，所以基本上它的重复代码如下所示：

<ul> 
    <li> 
     <a href="{{name}}/releases">Releasepage</a> 
    </li> 
    <li> 
     <a href="{{name}}/concerts">Concertpage</a> 
    </li> 
    etc. etc. 
</ul>

所以我想topmenu一直没有得到重新渲染。是否有可能在一个控制器中包含所有内容？

答

有布局& ShellView/MenuView。不要将每个视图的$ el附加到正文，而应为每个特定视图使用一个容器。一种方法可以是：

<body> 
    <div id='menu'></div> 
    <div id='content'></div> 
</body> 


new Backbone.Router.extend({ 
    initialize:function(){ 
     new MenuView({el:"#menu"}).render(); //this one creates menu 
    }, 
    routes:{...}, 
    routeHandler:function(){ 
    new ArtistVideosView({el:'#content'}).render(); 
    } 
});

BackboneJS避免重新渲染

相关推荐