我的程序的简短描述，最后是问题：
我有两页纸。第一页以行形式列出产品，并附有简短的说明。如果你点击一个，你会看到一个详细信息页面。
详细信息页面列出了产品详细信息，并在几个相关产品下方。如果您单击其中一个相关产品，则会使用从REST接口获取的新信息再次呈现同一页面。
如果我想使用浏览器的后退按钮或自己的后退按钮进入上一个产品详细信息页面，则会出现一个空白页面。这种情况只发生在我的iPad上。在桌面浏览器上使用Chrome运行良好。我调试了应用程序，发现backknejs路由从未被调用。我不知道为什么。
这是我的详细信息页面代码：
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;
});
我遵循renderRelatedSerieLainproduct中的一个链接。如果我单击新页面上的后退按钮，将调用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，但没有成功。也许有人能给我一个提示。谢谢
看起来jQuery Mobile和Backbone的路由器有冲突。看看这里：
http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/
这不是原因。我禁用了jquery mobile的路由。
// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;
// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;