0
我的程序的簡短說明，最後這個問題上的頁面過渡：Backbonejs - 後退按鈕不起作用，如果同一頁
我有兩頁。第一個頁面列出產品的行中有一個簡短的描述。如果你點擊一個，你將登陸一個詳細頁面。
詳細信息頁面列出了產品詳細信息和一些相關產品。如果您單擊某個相關產品，則會使用從REST界面獲取的新信息再次呈現同一頁面。
如果我想使用瀏覽器後退按鈕或自己的後退按鈕來訪問先前的產品詳情頁面，會出現一個空白頁面。這隻發生在我的iPad上。在桌面瀏覽器上使用Chrome可以正常工作。我調試了應用程序，我發現，backbonejs路由永遠不會被調用。我不知道爲什麼。
這是我的詳細頁面代碼：
define([
"jquery",
"lib/backbone",
"lib/text!/de/productDetails.html"
],
function(
$,
Backbone,
ContentTemplate
){
var PageView = Backbone.View.extend({
// product details template
template: _.template(ContentTemplate),
// back-button clicked
events:{
'click a#ac-back-button':'backInHistory',
},
// init
initialize: function(options){
this.options=options;
// bind functions
_.bindAll(this,
'render',
'renderRelatedSeriePlainproduct',
'backInHistory'
);
// listen for collection
this.listenTo(this.options.relatedCollectionPlainproduct, 'reset',this.renderRelatedSeriePlainproduct);
},
// back button
backInHistory: function(e){
e.preventDefault();
window.history.back();
},
// render template
render: function(){
// render template
this.$el.html(this.template(this.model.models[0].attributes));
return this;
},
// render related products
renderRelatedSeriePlainproduct: function(){
var models = this.options.relatedCollectionPlainproduct.models;
if(models.length==0){
$('.ac-plainproduct').hide();
} else{
var elem = $('#ac-related-listing-plainproduct');
var ct="";
ct+='<ul id="ac-list-related-plainproduct">';
$.each(models, function(key, value){
ct+='<li>';
ct+='<a href="index.html?article_id='+value.get('article_id')+'&type='+value.get('type')+'&serie='+value.get('series')+'#product-detail">Link';
ct+='</a>';
ct+='</li>';
});
ct+='</ul>';
elem.append(ct);
}
}
});
// Returns the View class
return PageView;
});
我遵循renderRelatedSeriePlainproduct。如果我後退按鈕單擊新頁面的backInHistory函數被調用的環節之一，但是window.history.back（）;不調用骨幹路由器。
也許問題是URL中的#hash，在頁面轉換過程中沒有改變。但是這並不能解釋爲什麼它能夠與我的臺式機上的Chrome完美兼容。對我來說，這似乎是異步調用的問題，但即使在那裏我也找不到問題。
也許這有助於列出我的路由器代碼。首先，我認爲這是一個骨幹殭屍問題，但我在轉換時刪除所有事件和視圖。
// function called by the route
// details page
productdetail: function() {
$.mobile.loading("show");
_self = this;
// lazy loading
require([
'collection/ProductDetailCollection',
'collection/RelatedCollection',
'view/ProductDetailView'
],
function(ProductDetailCollection, RelatedCollection, ProductDetailView){
// get URL parameters
var articleID = _self.URLParameter('article_id');
var type = _self.URLParameter('type');
var serie = _self.URLParameter('serie');
// product - details
var productDetail = new ProductDetailCollection.ProductDetail({id: articleID});
// related products
_self.relatedCollectionPlainproduct = new RelatedCollection({serie:serie, type:"Electronics", article_id:articleID});
// assign binded context
productDetail.fetch({
// data fetched
success: function (data) {
// page transition
_self.changePage(new ProductDetailView({
model:data,
relatedCollectionPlainproduct:_self.relatedCollectionPlainproduct
}));
// fetch data
_self.relatedCollectionPlainproduct.fetch({reset:true});
}
});
});
},
// page transition
changePage:function (page) {
// remove previous page from DOM
this.page && this.page.remove() && this.page.unbind();
// assign
this.page = page;
// assign page tag to DOM
$(page.el).attr('data-role', 'page');
// render template
page.render();
// append template to dom
$('body').append($(page.el));
// set transition
var transition = "fade";
// we want to slide the first page different
if (this.firstPage) {
transition = "fade";
this.firstPage = false;
}
// make transition by jquery mobile
$.mobile.changePage($(page.el), {changeHash:true, transition: transition});
// page was rendered - trigger event
page.trigger('render');
$.mobile.loading("hide");
},
我試過使用allowSamePageTransition但沒有成功。也許有人可以給我一個提示。謝謝！