CODEWITHSUNDEEP
ruby-on-railsbackbone.jscoffeescript
ac360
ac360

Reputation: 211

Rails + Backbone Model is undefined even within fetch success

I'm simply trying to .get an attribute and display it in an html element in a Rails, Backbone, Coffeescript app, yet the result is always undefined in the console. The error with this code is:

Uncaught TypeError: Cannot read property 'length' of undefined

The goal is to have one dashboard display various panels. I've tried around 50 variations of the following code in the last 4 hours :\ Could you please help?

Backbone Router:

class App.Routers.Dashboard extends Backbone.Router

routes:
    '': 'index'

initialize: ->
    preflist = new App.Models.Preflist()
    preflist.fetch success: ->
        paneloneview = new App.Views.PanelOne(model: preflist)
        $('#panel-one').html(paneloneview.render().el)

Backbone View:

class App.Views.PanelOne extends Backbone.View

    template: JST['dashboard/panel_one']

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

Template file:

<h1>Panel One</h1>

<p><%= @model.length %></p>

Upvotes: 2

Views: 394

Answers (2)

numbers1311407
numbers1311407

Reputation: 34072

You probably want to pass the render function an object (though that's just an educated guess).

Perhaps:

render: ->
  $(@el).html(@template({model: @model}))
  this

// and in an eco template

<h1>Panel 1</h1>
<p><%= @model.length %></p>

Upvotes: 1

ac360
ac360

Reputation: 211

I figured it out. I just had to sleep on it and then watch the Backbone RailsCast one more time. Thanks for your help everyone! The correct code is this: 

class App.Routers.Dashboard extends Backbone.Router

routes:
    '': 'index'

initialize: ->
    preflist = new App.Models.Preflist()
    preflist.fetch success: ->
        paneloneview = new App.Views.PanelOne(model: preflist)
        $('#panel-one').html(paneloneview.render().el)


class App.Views.PanelOne extends Backbone.View

    template: JST['dashboard/panel_one']

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



<h3>Panel One</h3>

<p><%= @preflist.get('panel_one') %></p>

Upvotes: 0

Related Questions