hashbang没有正确刷新页面时硬refersh

Question

我建立使用Rails 3. Backbone.js的应用程序当我展示的产品名单，并在顶部点击一个产品，我看到的网址一样

http://localhost:3010/#products/20 

但是，当我硬刷新网页，我没有看到产品信息。在服务器端，而不是为产品提供了JSON请求我看到以下

Started GET "/" for 127.0.0.1 at 2011-08-11 13:26:38 -0400 
    Processing by HomeController#index as HTML 

这里是我的JavaScript代码

$(function(){ 

    window.Product = Backbone.Model.extend({ 
    defaults: { name: 'name missing' }, 
    urlRoot: '/products' 
    }); 

    window.ProductsList = Backbone.Collection.extend({ 
    model: Product, 
    url: '/products' 
    }); 

    window.ProductViewForListing = Backbone.View.extend({ 
    template: $('#productTmplForListing').template(), 
    initialize: function() { 
     _.bindAll(this, 'render'); 
    }, 
    className: 'product', 
    render: function(){ 
     var fragment = $.tmpl(this.template, this.model.toJSON()); 
     $(this.el).html(fragment); 
     return this; 
    } 
    }); 

    window.ProductViewForShow = Backbone.View.extend({ 
    template: $('#productTmplForShow').template(), 
    initialize: function(){ 
     _.bindAll(this, 'render'); 
     this.render(); 
    }, 
    render: function(){ 
     var fragment = $.tmpl(this.template, this.model.toJSON()); 
     $(this.el).html(fragment); 
     return this; 
    } 
    }); 

    window.AppView = Backbone.View.extend({ 
    el: $('#products'), 
    initialize: function(){ 
     _.bindAll(this, 'render', 'showProduct'); 
     this.render(); 
    }, 
    render: function(){ 
     var targetElement = $('#products'); 
     var self = this; 
     this.collection.each(function(product){ 
     var view = new ProductViewForListing({model: product}), 
      fragment = view.render().el; 
     self.el.append(fragment); 
     }); 
    }, 
    showProduct: function(id){ 
     var product = new Product({id: id}), self = this; 
     product.fetch({ 
     success: function(){ 
      var mainElement = self.el.closest('#main'), 
       view = new ProductViewForShow({model: product}); 
      mainElement.find('#products').html(''); 
      self.el.append(view.render().el); 
     }, 
     error: function(){ alert('error getting product details'); } 
     }); 
     return false; 
    } 
    }); 

    window.products = new ProductsList(); 

    window.AppRouter = Backbone.Router.extend({ 
    initialize: function(){ 
    }, 
    routes: { 
     '': 'home', 
     'products/:id': 'showProduct' 
    }, 
    home: function(){ 
     var self = this; 
     window.products.fetch({ 
     success: function(){ 
      self.appView = new AppView({ collection: window.products }); 
      self.appView.render(); 
     } 
     }); 
    }, 
    showProduct: function(id){ 
     window.App.appView.showProduct(id); 
    } 
    }); 

    window.App = new window.AppRouter(); 
    Backbone.history.start({pushState: false}); 

}); 

这里是我的索引模版

<script type="text/x-jquery-tmpl" id="productTmplForListing"> 
    <a href="#products/${id}" data-id='${id}'> 
    <img alt="${name}" class="productImage" height="190" src="/system/pictures/${id}/thumbnail/${picture_file_name}" width="190" /> 
    </a> 
    <p class="productName"> 
    <a href="/products/${id}"> 
     ${name} 
    </a> 
    </p> 
    <p class="productPrice"> 
    ${price} 
    </p> 
</script> 

Answer 1

你最有可能得到一个类似“undefined”的javascript错误，并没有名为'showProduct'的方法“，对吧？

问题是你在路由器上创建“window.App.AppView”的方式。你只在路由器命中默认路由时创建这个对象（'home'方法）。但是当您查看'＃/ products/20'散列片段并且在浏览器中点击刷新按钮时，路由器上的home方法不会执行。只有showProduct路线执行。

虽然这应该很容易解决。你需要移动“APPVIEW”创建你的路由器之外：

    window.AppRouter = Backbone.Router.extend({ 
    initialize: function(){ 
    }, 
    routes: { 
     '': 'home', 
     'products/:id': 'showProduct' 
    }, 
    home: function(){ 
     var self = this; 
     window.products.fetch({ 
     success: function(){ 
      self.appView.render(); 
     } 
     }); 
    }, 
    showProduct: function(id){ 
     window.App.appView.showProduct(id); 
    } 
    }); 

    window.App = new window.AppRouter(); 
    window.App.appView = new AppView({ collection: window.products }); 

    Backbone.history.start({pushState: false}); 

现在的“window.App.appView”将永远被创建时，页面加载并执行你的JavaScript，不管是什么路线执行。