render show page on submit backbone.js + rails + rails-backbone gem

Question

I am trying to setup my index.html.erb (root page) so that I can see two elements. A "new post" form, and a "new user" form. I am trying to get the forms' submit button to go to the show page after a user (or post) is created. It doesn't work on the root page - it simply changes the url to "localhost:3000/#/x", where "x" is the id of the user (or post), but the page doesn't change. However, when I go to "localhost:3000/users" and then try to create a user, it changes to show the users show page. This makes sense to me in a way (I can't put my finger on why...something to do with routing and being "inside" the app?). I just want the submit button to make the change to the show page when being used from the root page (again...it works fine once I am "inside" the app). I am only posting the "posts" code, the "users" code is identical except that anywhere "post" or "posts" appears, it would be "user" or "users", respectively. Here is some code:

new_view.js.coffee

Example.Views.Posts ||= {}

class Example.Views.Posts.NewView extends Backbone.View
  template: JST["backbone/templates/posts/new"]

  events:
    "submit #new-post": "save"

  constructor: (options) ->
    super(options)
    @model = new @collection.model()

    @model.bind("change:errors", () =>
      this.render()
    )

  save: (e) ->
    e.preventDefault()
    e.stopPropagation()

    @model.unset("errors")

    @collection.create(@model.toJSON(),
      success: (post) =>
        @model = post
        window.location.hash = "/#{@model.id}"

      error: (post, jqXHR) =>
        @model.set({errors: $.parseJSON(jqXHR.responseText)})
    )

  render: ->
    $(@el).html(@template(@model.toJSON() ))

    this.$("form").backboneLink(@model)

    return this

I've tried messing around with the "save" function - I played around with "window.location.hash". I also tried creating a method called "display" in the view, and had it use "router.navigate" to make the switch. I then added "this.display()" to the "save" function (right after "window.location.hash" line). It changed the url to what I wanted it to be...but still no page switch (from the root page).

posts_router.js.coffee

class Example.Routers.PostsRouter extends Backbone.Router
  initialize: (options) ->
    @posts = new Example.Collections.PostsCollection()
    @posts.reset options.posts

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

  newPost: ->
    @view = new Example.Views.Posts.NewView(collection: @posts)
    $("#posts").html(@view.render().el)

  index: ->
    @view = new Example.Views.Posts.IndexView(posts: @posts)
    $("#posts").html(@view.render().el)

  show: (id) ->
    post = @posts.get(id)

    @view = new Example.Views.Posts.ShowView(model: post)
    $("#posts").html(@view.render().el)

  edit: (id) ->
    post = @posts.get(id)

    @view = new Example.Views.Posts.EditView(model: post)
    $("#posts").html(@view.render().el)

post.js.coffee

class Example.Models.Post extends Backbone.Model
  paramRoot: 'post'

  defaults:
    title: null
    content: null

class Example.Collections.PostsCollection extends Backbone.Collection
  model: Example.Models.Post
  url: '/posts'

index.html.erb (root page)

<div id="container">Loading...</div>

<script type="text/javascript">
  $(function() {
    window.newView = new Example.Views.Users.NewView({model: <%= @users.to_json.html_safe -%>,collection: new Example.Collections.UsersCollection()});
    window.router = new Example.Routers.UsersRouter({users: <%= @users.to_json.html_safe -%>});
    var postView = new Example.Views.Posts.NewView({model: <%= @posts.to_json.html_safe -%>,collection: new Example.Collections.PostsCollection()});
    $('body').html(newView.render().$el);
    $('body').append(postView.render().$el);
    Backbone.history.start({pushState: true});
  });
</script>

Do I need a posts router? I am under the impression you can only have one "active" router.

Thanks in advance for any help, I will be paying attention to the post - I'll be responding within a few minutes of a comment.

UPDATE

Does example.js.coffee have anything to do with it?

#= require_self
#= require_tree ./templates
#= require_tree ./models
#= require_tree ./views
#= require_tree ./routers

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

Answer 1

Seems you have not correctly initialised your namespaces, you usually do:

window.Example =
  Views: {}
  Models: {}
  Routers: {}

And then you could have more namespaces, in your case, for Posts, in new_view.js.coffee:

Example.Views.Posts ||= {}

class Example.Views.Posts.NewView ...

You could also define deeper namespaces in the first object I wrote:

window.Example =
  Views:
    Posts: {}
    Users: {}
  Models: {}
  Routers: {}

In this case you won't have to write

Example.Views.Posts ||= {}

In your view.

If you are in Rails you could write this initialisation in your manifest application.js, although I have read is not recommended to write code there, in case you opt for this, remember to include first application.js

//= require_self
//= require_tree ./views
...

require_self should be first.