2013-10-28 115 views
0

我找不到任何提到我的問題,我使用我的骨幹路由器文件根據當前頁面ID通過使用下一個和上一個按鈕導航到不同的頁面。然而,當我點擊下一個或上一個時,它可以正常工作,但第二次單擊該按鈕時,functin會被調用兩次而不是一次,然後如果再次單擊它,它似乎被調用的次數甚至超過兩次這似乎是瘋狂的一點。骨幹增量問題

這裏是我的路由器文件:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'views/page', 
    'models/search', 
    'views/search', 
    'text!templates/search.html', 
    'models/song', 
    'text!templates/song.html' 


], function($, _, Backbone, PageV, SearchM, SearchV, SearchT, SongM, SongT) { 
    var vent = _.extend({}, Backbone.Events); 
    var AppRouter = Backbone.Router.extend ({ 
     routes: { 
      'page/:id': 'showPage', 
      'search': 'showView' ///:page 
     } 
    }); 

    var initialize = function() { 
     var app_router 
     app_router = new AppRouter; 


     console.log('router file hit'); 

     app_router.on('route:showPage', function (id) { 
      console.log('page rendered'); 
      var songies, collected, songM; 
      songM = new SongM(); 
      songM.localStorage = new Backbone.LocalStorage("music"); 
      songM.localStorage.findAll().forEach(function (i) { 
       collected = i; 
      }); 
      var songPages = Math.ceil(collected.music.length/25); //10 pages 
      var start = id * 25; 
      var songies = collected.music.splice(start, 25); 
      var titles = { 
       week: collected.week, 
       year: collected.year, 
       channel: collected. channel 
      }; 
      var page = new PageV({model: songM, collection: songies, vent: vent, titles: titles}); 
      page.render(id); 
      vent.on('next', advance); 
      vent.on('previous', moveBack); 
      var currentId = parseInt(id); 
    //PROBLEM OCCURS TO THE BOTTOM TWO FUNCTIONS, and they are triggered by the vent.on above. 

      function moveBack() { 
       console.log('here is the current ID'); 
       var newPage = 'page/' + (currentId - 1); 

       if(currentId <= songPages && currentId > 0) { 
        app_router.navigate(newPage, true); 
       } else { 
        app_router.navigate('search', true); 
       } 
      } 
      function advance() { 
       console.log('here is the current ID'); 
       var newPage = 'page/' + (currentId + 1); 
       console.log(currentId); 
       console.log(songPages); 
       console.log(newPage); 
       if(currentId < songPages && currentId >=0) { 
        app_router.navigate(newPage, true); 
       } else { 
        app_router.navigate('search', true); 

       } 

      } 

     }); 

     app_router.on('route:showView', function() { 
      console.log('search page loaded'); 
      var searchM = new SearchM(); 
      var search = new SearchV({model: searchM, vent: vent}); // 
      search.render(); 
      vent.on('nextPage', printCons); 
      function printCons() { 
       console.log('changing pages'); 
       app_router.navigate('page/0', true); 
      }; 


     }); 

     Backbone.history.start(); 

    }; 

    return { 
     initialize: initialize 
    }; 
}); 

這裏是頁面視圖頁面:

define([ 
    'jquery', 
    'underscore', 
    'backbone', 
    'models/song', 
    'collections/songs', 
    'views/song', 
    'text!templates/page.html', 
    'text!templates/song.html' 

], function($, _, Backbone, Song, Songs, SongV, PageT, SongT){ 

    var Page = Backbone.View.extend({ 

    el: $("#Sirius"), 
    events: { 
     "click .prev": "previous", 
     "click .next": "next" 
    }, 
    previous: function() { 
     this.options.vent.trigger('previous'); 
    }, 
    next: function() { 
     this.options.vent.trigger('next'); 
    }, 
    render: function() { 
     var headings = this.options.titles; 
     var info = { 
     week: headings.week, 
     channel: headings.channel, 
     year: headings.year 
     } 
     var pagetemp = _.template(PageT, info); 
     this.$el.html(pagetemp); 
     var songColl = this.collection; 
     var songV = new SongV({collection: songColl}); 
     songV.render(); 

    } 


    }); 
    return Page; 
}); 

我能想到的唯一的問題是,它在某種程度上還記得過去的實例,並調用在他們兩個上的功能......否則我不知道爲什麼會被調用兩次......因爲如果我用該ID刷新頁面,然後單擊上一個或下一個,它不會增加兩次......所以它必須記憶中或不知道如何去...

回答

1

問題是與你的app_router.on事件處理程序中的以下事件處理程序綁定:

vent.on('next', advance); 
vent.on('previous', moveBack); 

每次展現出新的路線的時候,你又結合這些功能的事件聚合。您應該將這兩個綁定外部移動到初始化函數,以免多次綁定它。

另一個速戰速決,如果由於某種原因外移動這些綁定打破了功能,將取消綁定以前綁定,然後重新綁定的事件處理程序:

vent.off('next'); 
vent.on('next', advance); 
vent.off('previous'); 
vent.on('previous', moveBack); 

瞭解有關更多細節,請參見Backbone docs

+0

問題是我使用的router.on內的ID讓我怎麼通過ID呢? – Lion789

+0

查看我所做的有關如何解除綁定和重新綁定事件的編輯 –

+0

基本上,當再次調用它時,所有內容都會再次被綁定,因爲它會導航到新頁面? – Lion789

1

問題是,您每次更改路線時都會創建一個新視圖,但永遠不會刪除舊視圖。每次點擊下一個視圖時,您可能會翻倍!

這裏有一個職位,可以幫助:

Disposing of view and model objects in Backbone.js

+0

你能告訴我一個例子...我試圖在調用觸發器後刪除視圖,但它只是完全刪除視圖 – Lion789