backbone model undefined in the template. Using backbone

My Problem: "Uncaught TypeError: Cannot call method 'get' of undefined" -- meaning I haven't managed to pass my model from the view to the template despite calling $(@el).html(@template(pony: @model)) when I render.

Context: This is my first backbone app. I'm using the backbone-on-rails gem and following on with Ryan Bates' railscast: http://railscasts.com/episodes/325-backbone-on-rails-part-2. The backbone-on-rails gem generates empty router, collection, model, view, and template files in the assets/javascripts folder. I'm sure it does some other things behind the seens but i'm not sure what. All the extensions are js.coffee so whitespace matters!

Suspects: Since the TypeError is happening in the correct template I assume that my routers and event bindings are all fine. Since the object in my view is undefined I assume that all of my references to the collection and the model are suspect. Therefore, I will post code starting from the template in question, then my model view, then my collection view, then my model class, then my 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))
    this

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)
    this

  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
      for attribute, messages of errors
        alert "#{attribute} #{message}" for 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 I do have a seed file where I create Ponies with names and img_urls.

Thanks in advance for your help!

Some debugging to narrow down the problem:

Removing the variables from the model template I get: Uncaught TypeError: Property 'template' of object # is not a function

The html I'm generating from my model view is:

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

I'm not sure why i can't call template on the model since I defined it at the top of the model view.

链接地址: http://www.djcxy.com/p/53368.html

上一篇: 骨干模型toJSON不会呈现所有属性

下一篇: 骨干模型在模板中未定义。 使用骨干