Question

I’m trying to develop a Todo-list application like a sample application for Backbone.js. The code is here (prototype branch is the latest). When text is input, a task with the text should be saved on local storage. But, the text failed to be saved with a below error.

a._validate is not a function

Why? Codes is following.

app/assets/javascripts/tasks.js.coffee

$ ->
  tasks = new Todoapp.Collections.Tasks
  appView = new Todoapp.Views.AppView(el: $("#todoapp"), collection: tasks)

app/assets/javascripts/backbone/views/app.js.coffee

Todoapp.Views.AppView = Backbone.View.extend
  events:
    "keypress #task_input" : "createTask"
  initialize: ->
    this.collection.bind("add", this.alertCreate, this)
  createTask: (e) ->
    text = $("#task_input").val()
    return if !text or e.keyCode isnt 13
    this.collection.create(content: text)
    $("#task_input").val("")
  alertCreate: ->
    alert("Created!")

app/assets/javascripts/backbone/collections/tasks.js.coffee

Todoapp.Collections.Tasks = Backbone.Collection.extend
  model: Todoapp.Models.Task
  localStorage: new Store("tasks")

app/assets/javascripts/backbone/models/task.js.coffee

Todoapp.Models.Task = Backbone.Model.extend

Answer 1

Your problem is with your model definition:

Todoapp.Models.Task = Backbone.Model.extend

All that does is assigns the Backbone.Model.extend method to Todoapp.Models.Task, it doesn’t execute the extend method. Add some parentheses and it will work:

Todoapp.Models.Task = Backbone.Model.extend()

Demo: http://jsfiddle.net/ambiguous/ejjHz/

Or better, write your CoffeeScript in CoffeeScript rather than some mixture of CoffeeScript and JavaScript:

class Todoapp.Models.Task extends Backbone.Model

class Todoapp.Collections.Tasks extends Backbone.Collection
  model: Task
  localStorage: new Store('tasks')

class Todoapp.Views.AppView extends Backbone.View
  events:
    'keypress #task_input' : 'createTask'
  initialize: ->
    @collection.bind('add', @alertCreate)
  createTask: (e) ->
    text = $('#task_input').val()
    return if !text or e.keyCode isnt 13
    @collection.create(content: text)
    $('#task_input').val('')
  alertCreate: =>
    alert('Created!')

Demo: http://jsfiddle.net/ambiguous/HPHVG/

The changes:

1. Use class ... extends instead of C = B.extend. This alone would solve your problem.
2. Use @ instead of this.
3. Use bound methods (=>) instead of supplying a context to bind.