Question

So I’m new to Backbone and I developed a Rails App with a JSON API that I’ve hooked Backbone in to.

When I use the site directly and follow the links, every thing works great.

As in I click a link that directs to /#/1 and it directs me to the show page where the post follow the ID of one.

However, if I refresh the page it no longer displays that information, and throws an error:

“Uncaught TypeError: Cannot call method ‘toJSON’ of undefined “

When I go to the console and access my views BackboneBlog.router.show(1) it does work correctly. It is only when I go to http://localhost:3000/#/1 that I get an issue. However, when I click on the link in my index page, that links directly to http://localhost:3000/#/1

The even more hilarious thing is BackboneBlog.router.posts is correct. However, if in my code I type that exactly,but add BackboneBlog.router.posts.get(1), it returns undefined. However, if I run that exact code in the console with the same URL, it works.

Here is my code:

posts_router.js.coffee–

class BackboneBlog.Routers.PostsRouter extends Backbone.Router
  initialize: ->
    @posts = new BackboneBlog.Collections.PostsCollection()
    @posts.fetch()

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

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

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

  show: (id) ->
    console.log(@posts) #puts PostsCollection, with posts in it
    console.log(id) #puts 1
    @post = @posts.get(id)
    console.log(@post) #puts undefined 
    @view = new BackboneBlog.Views.Posts.ShowView(model: @post)
    $("#posts").html(@view.render().el)

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

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

show_view.js.coffee —

BackboneBlog.Views.Posts ||= {}

class BackboneBlog.Views.Posts.ShowView extends Backbone.View
  template: JST["backbone/templates/posts/show"]

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

index_view.coffee —

BackboneBlog.Views.Posts ||= {}

class BackboneBlog.Views.Posts.IndexView extends Backbone.View
  template: JST["backbone/templates/posts/index"]

  initialize: () ->
    @options.posts.bind('reset', @addAll)

  addAll: () =>
    $("tbody").html("")
    @options.posts.each(@addOne)

  addOne: (post) =>
    view = new BackboneBlog.Views.Posts.PostView({model : post})
    @$("table").append(view.render().el)

  render: =>
    $(@el).html(@template(posts: @options.posts.toJSON() ))
    @addAll()

    return this

backbone_blog.js.coffee —

window.BackboneBlog =
  Models: {}
  Collections: {}
  Routers: {}
  Views: {}
  init: ->
    @router = new BackboneBlog.Routers.PostsRouter()
    Backbone.history.start()

Thanks All! <3

Edit:
tl;dr: If I directly access http://localhost:3000/#/1 I get errors, however, if I link there, it works perfectly fine. If I type it in the console, it works fine. It is only when I navigate directly to the URL that it does not work. Even still, in the show method, every thing works until I directly get the post

Answer 1

Your problem is that you are passing a model that is has not been fetched yet. Therefore the model is undefined and therefore you cannot call .toJSON on an undefined model. Async functions are quite misleading especially when trying to console.log whats happening. So take this example, you console.log an undefined model. Now when that model is fetched, the undefined model you logged, will be replaced with with the data that has been fetched. Therefore it looks as though it is happening in sequence, but you are actually passing an undefined model into your view.

Thats why when you navigate you your show view, everything works correctly. It is because your collection has already been fetched. When you refresh from the show view, the collection still needs to be fetched, but your show view is not waiting on your collection being fetched.

I hope this is making sense. But to show you what I mean, only call your show method on your router on the success callback of your collection being fetched.

Let me know if I can help you further.