Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I'm building a Rails 4 application and I'm trying to combine location.hash Backbone History with turbolinks push state. The application is broken up into multiple smaller, SPA like pages.

Example of Problem

The problem I'm having is that when I do Backbone.Router.navigate(), within a page, it doesn't register anything with turbolinks. Here's a hypothetical example to demonstrate the problem:

  1. Visit /one
  2. @router.navigate 'page-one'
  3. Location becomes /one#page-one
  4. @router.navigate 'page-two'
  5. Location becomes /one#page-two
  6. Click on link to /two
  7. Turbolinks intercepts and navigates to /two
  8. Click on the Back Button, you are still stuck on /two
  9. Click on the Back Button again, you are still stuck on /two
  10. Click on the Back Button a third time, you are brought back to /one

What I Tried

I guessed that what's probably happening is that when navigating via backbone, the browser is logging the change but turbolinks isn't. I tried to expose Turbolinks.reflectNewUrl:

turbolinks.js.coffee

@Turbolinks = { visit, pagesCached, reflectNewUrl }

And then modifying Backbone.Router.navigate so that it registers with turbolinks every time we navigate:

navigate = Backbone.Router.prototype.navigate
Backbone.Router.prototype.navigate = (page, args...) ->
  navigate page, args...
  window?.Turbolinks?.reflectNewUrl "##{page}"

That sort of worked, Step 8 above is no longer stuck on /two, but click on the back button again and we get this error:

Uncaught TypeError: Cannot call method 'getElementsByTagName' of null turbolinks.js:142
removeNoscriptTags turbolinks.js:142
changePage turbolinks.js:111
fetchHistory turbolinks.js:69
(anonymous function) turbolinks.js:390

So something is still wrong.

Now I'm hoping there's a kind soul out there to help me out and point out my perhaps obvious blunder :)

share|improve this question
    
Why are you trying to mix two different (and probably incompatible) single page application systems? –  mu is too short Sep 13 '13 at 4:13
    
well it started off being a normal rails app, but now we're looking at building a mindmapping system on one of the views - want to be able to navigate via history to different points in the map. happy to drop turbolinks if there's no alternative but it'd be nice to keep both –  Nathan Kot Sep 13 '13 at 5:09
    
Backbone and Turbolinks are fundamentally incompatible because of how they interact with the browser's push state. Also, Turbolinks is essentially a shim to speed up loading full HTML pages and Backbone is a data modeling layer that can interact more directly with your app. They are completely different, so I wouldn't try to conflate them together. –  Tim Dorr Sep 13 '13 at 5:48
    
Why can't you use Backbone routers and pushState to "be able to navigate via history to different points in the map"? –  mu is too short Sep 13 '13 at 5:53
    
muistooshort, I am using backbone routers although with pushstate off, turning it on brings more complexities to the table since backbone will need to know about rails routes - and still experiencing the same problem after trying with pushstate on. TimDorr, you're probably right. I'm hoping that since Backbone routing can use location.hash rather than pushState there's a way around it. Not sure if this GH issue is relevant: github.com/rails/turbolinks/issues/256 –  Nathan Kot Sep 13 '13 at 8:02

2 Answers 2

up vote 2 down vote accepted

I disagree about not mixing Turbolinks and Backbone. They fulfil different roles and there are occasions where you might like to use both.

In fact, I understand Basecamp uses both.

You can use this (now infamous) post as a starting point: http://www.goddamnyouryan.com/blog/rails-4-turbolinks-and-backbone

However I still had the problem you're having. Here's how I solved it (provisionally, I haven't tested this in the wild):

window.MyApp =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}

  initialize: ->
    # Build it up
    @router = new MyApp.Routers.Pages(data)
    Backbone.history.start()

  close: ->
    # Tear it down
    @router.close(false)
    @router = undefined

# Turbolinks exposes the before-change event when a page change is initiated
$(document).on 'page:before-change', ->
  # If the app has been initialized
  if MyApp.router?

    # Stop the history and clean up the app
    Backbone.history.stop()
    MyApp.close()

    # We're leaving the domain of the backbone app, check for Turbolinks
    if Turbolinks?.supported
      # Push the last known state of the app to the Turbolinks history
      window.history.replaceState {turbolinks: true, url: window.location.href}, window.title, window.location.href

$(document).on 'page:change', ->
  # If it's the page with our backbone app
  if $('#pages').size() > 0
    MyApp.initialize()
share|improve this answer
    
Thanks for the explanation. I tried this but couldn't get it to work. There are two things that I'm encountering: 1. Backbone.Router does not seem to have a close() method. Should I use Marionette.AppRouter? 2. The when going back and forth between backbone and non-backbone pages, I get an error saying: Uncaught Error: Backbone.history has already been started Did anyone else encounter this? –  Remon Oldenbeuving Jun 19 at 23:56
    
@router.close() in this context is just any close method you use to clear up your router. You can define it yourself or leave it out if you want. –  Jonny H Jun 21 at 19:46
    
I elaborated a bit on this and tried to explain why it works in a blog post here: medium.com/@midhir/… –  Jonny H Jun 28 at 13:21
window.Summerland =
  Models: {}
  Collections: {}
  Views: {}
  Routers: {}
  initialize: ->
    new Summerland.Routers.Application
    Backbone.history.start pushState: true

$(document).ready ->
  Summerland.initialize()

$(document).on 'page:load', ->
  Backbone.history.stop()
  Summerland.initialize()
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.