backbone.js - backbone model undefined in the template. Using backbone-on-rails gem -

my problem: "uncaught typeerror: cannot call method 'get' of undefined" -- meaning haven't managed pass model view template despite calling $(@el).html(@template(pony: @model)) when render.

context: first backbone app. i'm using backbone-on-rails gem , following on ryan bates' railscast: http://railscasts.com/episodes/325-backbone-on-rails-part-2. backbone-on-rails gem generates empty router, collection, model, view, , template files in assets/javascripts folder. i'm sure other things behind seens i'm not sure what. extensions js.coffee whitespace matters!

suspects: since typeerror happening in correct template assume routers , event bindings fine. since object in view undefined assume of references collection , model suspect. therefore, post code starting template in question, model view, collection view, model class, collection class.

my model template: app/assets/javascripts/templates/ponies/pony.jst.eco

<%= @pony.get('name') %> <img src="<%= pony.get('img_url') %>" alt="shutterfly" height="70" width="70"> <% if @pony.get('selected'): %>   <span class="selected">selected</span> <% end %> 

my model view: app/assets/javascripts/views/ponies/pony.js.coffee

class mlp.views.pony extends backbone.view   template: jst['ponies/pony']   tagname: 'li'    events:     'click': 'showpony'    initialize: ->     @model.on('change', @render, this)     @model.on('select', @selectpony, this)    showpony: ->     backbone.history.navigate("ponies/#{@model.get('id')}", true)    selectpony: ->     $('.selected').removeclass('saddled')     @$('.selected').addclass('saddled')    render: ->     $(@el).html(@template(pony: @model))     

my collection view: app/assets/javascripts/views/ponies/ponies_index.js.coffee

class mlp.views.poniesindex extends backbone.view    template: jst['ponies/index']    events:     'submit #new_pony': 'createpony'     'submit #new_setting': 'changesetting'     'click #pony_up': 'ponyup'    initialize: ->     @collection.on('reset', @render, this)     @collection.on('add', @appendpony, this)     @collection.on('change', @render, this)    render: ->     $(@el).html(@template())     @collection.each(@appendpony)        appendpony: (pony) =>     view = new mlp.views.pony(model: pony)     @$('#ponies').append(view.render().el)    ponyup: (event) ->     event.preventdefault()     @collection.ponyup    changesetting: (event) ->     event.preventdefault()     setting = document.getelementbyid "setting"     new_src = $('#new_setting_img_url').val()     console.log setting     console.log new_src     setting.src = new_src    createpony: (event) ->     event.preventdefault()     attributes = name: $('#new_pony_name').val()       img_url: $('#new_pony_img_url'.val())     @collection.create attributes,       wait: true       success: -> $('#new_pony')[0].reset()       error: @handleerror    handleerror: (pony, response) ->     if response.status == 422       errors = $.parsejson(response.responsetext).errors       attribute, messages of errors         alert "#{attribute} #{message}" message in messages 

my model class: app/assets/javascripts/models/pony.js.coffee

class mlp.models.pony extends backbone.model    select: ->     @set(selected: true)     @save()     @trigger('saddle') 

my collection class: app/assets/javascripts/collections/ponies.js.coffee

class mlp.collections.ponies extends backbone.collection   url: '/api/ponies'   model: mlp.models.pony    ponyup: ->     selected = @shuffle()[0]     selected.select() if selected 

and have seed file create ponies names , img_urls.

thanks in advance help!

some debugging narrow down problem:

removing variables model template get: uncaught typeerror: property 'template' of object # not function

the html i'm generating model view is:

pony.prototype.render = function() {   $(this.el).html(this.template({     pony: this.model   }));   return this; 

i'm not sure why can't call template on model since defined @ top of model view.