Question

我的程序的简短描述，最后是问题：

我有两页。第一页列出了具有简短描述的行的产品。如果您单击一个，您将登陆详细页面。

详细信息页面列出了产品详细信息以及几个相关产品。如果您单击其中一个相关产品，则会再次使用从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 函数，但窗口。 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但没有成功。也许有人可以给我一个暗示。谢谢！

Answer 1

看起来jQuery Mobile和Backbone的路由器存在冲突。看看这里：

http://coenraets.org/blog/2012/03/using-backbone-js-with-jquery-mobile/

Answer 2

这不是原因。我禁用了jquery mobile的路由。

// Prevents all anchor click handling
$.mobile.linkBindingEnabled = false;

// Disabling this will prevent jQuery Mobile from handling hash changes
$.mobile.hashListeningEnabled = false;

Backbonejs - 如果同一页面上的页面转换，后退按钮不起作用

2 个答案: