1

我已经建立了一个超级简单的骨干应用只有一个路由器和两个视图来试图找到正确的方式来处理路由没有hashbangs。骨干路由器没有hashbangs

var Router = Backbone.Router.extend({ 
    routes: { 
     '': 'index', 
     'episodes': 'episodes' 
    }, 

    index: function() { 
     var view = new IndexView(); 
     view.render(); 
    }, 

    episodes: function() { 
     var view = new EpisodesView(); 
     view.render(); 
    } 
}); 

var IndexView = Backbone.View.extend({ 
    el: $('#primary'), 
    render: function() { 
     console.log('index view'); 
    } 
}); 

var EpisodesView = Backbone.View.extend({ 
    el: $('#primary'), 
    render: function() { 
     console.log('episodes view'); 
    } 
}); 

var router = new Router; 
Backbone.history.start({pushState: true}); 

我意识到history对象允许向前和向后导航页之间,这是伟大的。然而,它实际上的实施方式似乎有点让我感到困惑。

例如,我创建了一个简单的MAMP服务器来服务index.html文件和JS文件。导航到http://backbone:8888/,控制台记录index view就像我告诉它。但是,导航到http://backbone:8888/episodes(通过在地址栏中输入)会返回404。但是,如果我导航到http://backbone:8888/#episodes,则URL重定向到http://backbone:8888/episodes(没有hashbang),并且我将episodes view记录到控制台,这显然意味着它正在击中那EpisodesView查看。

从这里,我可以在索引和剧集视图之间来回切换。 (回击/,前进命中/剧集)。这一切都很好,直到我再次在/episodes上刷新。 404 ...

所以我的问题是:Backbone如何设置来处理URL而不依赖hashbangs?我在该主题上找到的所有内容都说“哦,只是pushState!”。好吧,我使用pushState,像我上述的,你不能打像/episodes一个URL的情况下直接得到一个404

+0

这是一个服务器端问题。 Apache可能在您的web目录的文件夹集中寻找index.html。也许你可以尝试对你的根index.html做一次Apache URL重写,无论你使用哪个URL。这可能不是一个好的长期解决方案,因为您可能想要添加某种服务器端逻辑(Node.JS,Python,Ruby,PHP等)。然后,您必须决定是否要在服务器端渲染正确的页面以及其他问题。 – Gohn67

回答

1

当您使用按压状态下,页是从后端服务,这意味着您必须在后端定义对应于前端路线的相应路线。

如果后端没有找到请求的路由,那么它会传递一条404消息,因为它不知道要提供什么服务。在您的情况下,剧集视图会在前端级别触发,但浏览器没有DOM呈现视图,因为没有提供任何内容,因此刷新页面。

默认情况下,路由http://backbone:8888/将用于索引文件,因为这是Web服务器的配置方式。
我不确定你使用的是什么后端技术,但是为了从http://backbone:8888/episodes提供一个文件,只要确保你的后端有一个设置好的路由器,并且它应该可以工作。