我找不到任何提到我的問題,我使用我的骨幹路由器文件根據當前頁面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刷新頁面,然後單擊上一個或下一個,它不會增加兩次......所以它必須記憶中或不知道如何去...
問題是我使用的router.on內的ID讓我怎麼通過ID呢? – Lion789
查看我所做的有關如何解除綁定和重新綁定事件的編輯 –
基本上,當再次調用它時,所有內容都會再次被綁定,因爲它會導航到新頁面? – Lion789