BackboneJS避免重新渲染

Question

我有一个带有大型路由器的Backbone App。 我使用骨干布局管理器来加载不同的布局，具体取决于我所在的子页面。 我的问题是，每次子页面被渲染时，顶部导航都会再次被渲染。 那么我该如何避免呢？

我的路由器：

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不会一直被重新渲染。 是否可以将所有内容都包含在一个控制器中？

Answer 1

有一个布局和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避免重新渲染

问题描述

1 个解决方案

解决方案1
0 2014-09-02 05:27:25

BackboneJS避免重新渲染

问题描述

1 个解决方案

解决方案1 0 2014-09-02 05:27:25

解决方案1
0 2014-09-02 05:27:25