Patrick Wolf
Patrick Wolf

Reputation: 1319

Mixing backbone.js routers and rails controllers

I'm currently attempting to wrap my head around grafting backbone.js into my rails application. For starters, I want to build it into a a specific part of the rails application at /applications. With that said I have a rails resource "resources :applications" which gives me localhost:3000/applications. Now when I instantiate backbone for /applications I get anchor tags for the backbone routing at that rails resource. IE localhost:3000/applications/#applications/5.

Given that I'm only going to be using backbone at specific parts of the rails app, thus not making it a single page app, is this the right way to do things? The URL appears to be a bit redundant.

The correct answer might be that I need to do away with the backbone router? If so, then how can :id be passed to the backbone application when attempting to look up a collection / model.

The point of me using backbone is to help organize a particular section of the rails app that will be javascript heavy.

I should mention that I can change the router to something like:

routes:
 '': 'index'
 ':id': 'show'

which will give me the url of localhost:3000/applications/#/1 - however I think this paints me into a corner and will not allow me to use backbone on other rails resources. If I were to have localhost:3000/dashboard with backbone invoked then the wrong backbone.js functionality would get executed.

Another thought would be to have an invocation of a backbone router per rails resource. I could use the aforementioned routes code since the router would only be invoked for that rails resource.

Upvotes: 4

Views: 1763

Answers (1)

Patrick Wolf
Patrick Wolf

Reputation: 1319

I ended up figuring this out. I switched to using backbone-rails and followed their tutorial in getting a sample application up and running; https://github.com/codebrew/backbone-rails. The solution came in the rails html.erb and only loading the specific router that I needed for the rails resource.

routes:
  "new"      : "newPost"
  "index"    : "index"
  ":id/edit" : "edit"
  ":id"      : "show"
  ".*"        : "index"

Then in say a posts.html.erb I could put the following.

<div id="posts"></div>

<script type="text/javascript">
  $(function() {
    // Blog is the app name
    window.router = new Testing.Routers.PostsRouter({posts: <%= @posts.to_json.html_safe -%>});
    Backbone.history.start();
  });
</script>

If my answer doesnt make sense, I suggest going through the tutorial on the github link that was aforementioned.

Upvotes: 3

Related Questions