如何使用Backbone.js的一个多页面的Web应用程序?

问题描述:

我一直使用骨干线路(#!/等等)

I've always used Backbone's routes (#!/blah)

不过,我认识到,为了通过谷歌获得索引,您需要提供该网站的非JavaScript版本。

But I realize that in order to get indexed by Google, you need to provide a non-javascript version of the site.

我不喜欢写code的两倍。所以,我宁愿建立一个多页的应用程序,而不是单个页面的Web应用程序的。

I don't like to write code twice. So, I would rather build a multi-page app instead of a single page web app.

Backbone.js的为我提供了结构,所以我的javascript不会变成sphagetti一塌糊涂。但是,我对如何使用主干构建多页的应用程序完全无能。

Backbone.js provides me with the "structure" so my javascript does not turn into sphagetti mess. But , I'm completely clueless on how to build multi-page apps using Backbone.

你包括在每一页上的main.js文件呈现?什么路线?你怎么处理呢?你怎么和模块化等处理?

Do you include the main.js file on every page render? What about routes? How do you deal with that? How do you deal with modularizing, etc?

我希望有关于如何建立JavaScript的应用程序使用骨干多页的教程。

I wish there was a tutorial on how to build multi-page javascript apps using Backbone.

有做这样的事情有很多的考虑,但这里有两个关键之一:

There are a lot of considerations for doing something like this, but here are two keys one:

您可能希望您的Web服务器路线一切以服务于同一静态页面(假设它是静态的资产)。这意味着,在 http://yourdomain.com/* 一切都将成为 /var/www/yourdomain.com/index.html 。一旦静态加载页面时,页面上的JS会决定做什么给出的网址。

You probably want to have your web server route everything to the serve the same static page (assuming it is static assets). This means that everything in http://yourdomain.com/* will serve /var/www/yourdomain.com/index.html. Once the static page is loaded, the JS on that page will decide what to do given the url.

要做到你的路由,您仍可以使用路由骨干,但不使用hashbangs(即#!/等等风格的URL)。请参见 http://backbonejs.org/#History 以实例。这将允许您浏览到真实的URL,而不实际需要刷新页面。如果浏览器不支持pushState的,一切都将仍然有效,但它会重新加载页面。

To do your routing, you can still use backbone routing, but don't use hashbangs (the #!/blah style urls). See http://backbonejs.org/#History for instance. This will allow you to navigate to real URLs without actually needing a page refresh. If the browser doesn't support a pushState, everything will still work, but it will reload the page.