Backbone / Coffeescript Todo教程...未捕获的ReferenceError:未定义存储

时间:2014-03-02 23:27:07

标签: javascript jquery backbone.js coffeescript

我正在尝试阅读本教程here,但我收到有关LocalStorage适配器的控制台错误(“未捕获的ReferenceError:Store未定义。”)它与此行相关:

localStorage: new Store("todos")

任何帮助将不胜感激!

这是我从我试图运行的教程中复制和粘贴的代码:

$ ->

  class Todo extends Backbone.Model

    defaults:
      content: "empty todo..."
      done: false

    initialize: ->
      if !@get("content")
        @set({ "content": @defaults.content })

    toggle: ->
      @save({ done: !@get("done") })

    clear: ->
      @destroy()
      @view.remove()

  class TodoList extends Backbone.Collection

    model: Todo

    localStorage: new Store("todos")

    getDone = (todo) ->
      return todo.get("done")

    done: ->
      return @filter( getDone )

    remaining: ->
      return @without.apply( this, @done() )

    nextOrder: ->
      return 1 if !@length
      return @last().get('order') + 1

    comparator: (todo) ->
      return todo.get("order")

  class TodoView extends Backbone.View

    tagName:  "li"

    template: _.template( $("#item-template").html() )

    events:
      "click .check"              : "toggleDone",
      "dblclick div.todo-content" : "edit",
      "click span.todo-destroy"   : "clear",
      "keypress .todo-input"      : "updateOnEnter"

    initialize: ->
      @model.bind('change', this.render);
      @model.view = this;

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

    setContent: ->
      content = @model.get("content")
      this.$(".todo-content").text(content)
      @input = this.$(".todo-input");
      @input.bind("blur", @close);
      @input.val(content);

    toggleDone: ->
        @model.toggle()

    edit: =>
      this.$(@el).addClass("editing")
      @input.focus()

    close: =>
      @model.save({ content: @input.val() })
      $(@el).removeClass("editing")

    updateOnEnter: (e) =>
      @close() if e.keyCode is 13

    remove: ->
      $(@el).remove()

    clear: () ->
      @model.clear()

  class AppView extends Backbone.View

    el_tag = "#todoapp"
    el: $(el_tag)

    statsTemplate: _.template( $("#stats-template").html() )

    events:
      "keypress #new-todo"  : "createOnEnter",
      "keyup #new-todo"     : "showTooltip",
      "click .todo-clear a" : "clearCompleted"

    initialize: =>
      @input = this.$("#new-todo")

      Todos.bind("add", @addOne)
      Todos.bind("reset", @addAll)
      Todos.bind("all", @render)

      Todos.fetch()

    render: =>
      this.$('#todo-stats').html( @statsTemplate({
          total:      Todos.length,
          done:       Todos.done().length,
          remaining:  Todos.remaining().length
      }))

    addOne: (todo) =>
      view = new TodoView( {model: todo} )
      this.$("#todo-list").append( view.render().el )

    addAll: =>
      Todos.each(@addOne);

    newAttributes: ->
      return {
          content: @input.val(),
          order:   Todos.nextOrder(),
          done:    false
      }

    createOnEnter: (e) ->
      return if (e.keyCode != 13)
      Todos.create( @newAttributes() )
      @input.val('')

    clearCompleted: ->
      _.each(Todos.done(), (todo) ->
          todo.clear()
      )
      return false

    showTooltip: (e) ->
      tooltip = this.$(".ui-tooltip-top")
      val = @input.val()
      tooltip.fadeOut()
      clearTimeout(@tooltipTimeout) if (@tooltipTimeout)
      return if (val is '' || val is @input.attr("placeholder"))

      show = () ->
          tooltip.show().fadeIn()
      @tooltipTimeout = _.delay(show, 1000)

  Todos = new TodoList
  App = new AppView()

1 个答案:

答案 0 :(得分:0)

想出来。我需要从here下载LocalStorage库。将其下载到我的项目目录中的lib文件夹,并按照README中的说明在我的HTML中要求该文件。