ReferenceError: users is not defined rails + backb

Question

So I asked this question: render view in backbone.js + rails

I feel I have gotten close to the answer thanks to people pointing me in the right direction. The code in my app/views/home/index.html.erb:

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

<script type="text/javascript">
  $(function() {
    window.newView = new Example.Views.Users.NewView({model: users});
    //$('body').html(newView.render().$el)
    console.log(newView.render().$el)
    //newView.render();
    Backbone.history.start();
  });
</script>

When I examine the firebug console after trying to load this page, I get the error:

ReferenceError: users is not defined
[Break On This Error]   

window.newView = new Example.Views.Users.NewView({model: users});

Here is the rest of the relevant code.

assets/javascripts/backbone/views/users/new_view.js.coffee

Example.Views.Users ||= {}

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

  events:
    "submit #new-user": "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: (user) =>
        @model = user
        window.location.hash = "/#{@model.id}"

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

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

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

    return this

users_router.js.coffee

class Example.Routers.UsersRouter extends Backbone.Router
  initialize: (options) ->
    @users = new Example.Collections.UsersCollection()
    @users.reset options.users

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

  newUser: ->
    @view = new Example.Views.Users.NewView(collection: @users)
    $("#users").html(@view.render().el)

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

  show: (id) ->
    user = @users.get(id)

    @view = new Example.Views.Users.ShowView(model: user)
    $("#users").html(@view.render().el)

  edit: (id) ->
    user = @users.get(id)

    @view = new Example.Views.Users.EditView(model: user)
    $("#users").html(@view.render().el)

Look at the comments to the old question, and you can pretty much see where I'm coming from - and what I have tried. Thanks!

UPDATE

user.js.coffee

class Example.Models.User extends Backbone.Model
  paramRoot: 'user'

  defaults:
    name: null
    email: null

class Example.Collections.UsersCollection extends Backbone.Collection
  model: Example.Models.User
  url: '/users'

Answer 1

Like the error said, users is not defined in new Example.Views.Users.NewView({model: users});.

In your home_controller.rb you should have something like:

def index
  @users = User.all
end

app/views/home/index.html.erb:

...
window.newView = new Example.Views.Users.NewView({model: <%= @users.to_json.html_safe -%>});
...

Hope this helps!

Answer 2

It looks like you are creating NewView object at initial stage when page loads. window.newView = new Example.Views.Users.NewView({model: users}); When it goes to NewView cosutructor it would not find the @collection because you are not passing in the parameter of NewView.

You should initialize the router when page load and then start backbone history as per the standard example of Backbone in Rails. I have an Example in Github which works fine. Please take a look of it and follow some documentation of backbone. If you want to make it working then you can put window.newView = new Example.Views.Users.NewView({model: users,collection: <CollectionObject>});

Hope this helps!!!