Javascript BackboneJS避免重新渲染_Javascript_Backbone.js

Javascript BackboneJS避免重新渲染

javascript backbone.js

Javascript BackboneJS避免重新渲染,javascript,backbone.js,Javascript,Backbone.js,我有一个带有大型路由器的主干应用程序。我使用主干布局管理器根据我所在的子页面加载不同的布局。我的问题是，每次渲染子页面时，都会再次渲染顶部导航。那么我该如何避免这种情况呢我的路由器： routes: { '': 'index', 'home': 'home', ':name' : 'artistchannel', ':name/' : 'artistchannel', ':name/videoes': 'artist_videos',

我有一个带有大型路由器的主干应用程序。我使用主干布局管理器根据我所在的子页面加载不同的布局。我的问题是，每次渲染子页面时，都会再次渲染顶部导航。那么我该如何避免这种情况呢

我的路由器：

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...

然后，我为每条路线配备了一个控制器（此处为艺术家和唱片摄影页面）：

音乐会、商品等也是如此

所有子页面（在本例中为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();
   }
});


新主干.Router.extend({
初始化：函数（）{
新建菜单视图（{el:#menu“}）.render（）；//此视图创建菜单
},
路由：{…}，
routeHandler:函数（）{
新的ArtistVideosView（{el:'#content'}）.render（）；
}
});

<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();
   }
});