骨干/咖啡脚本待办事项教程..未捕获的引用错误:未定义存储

Question

我正在尝试在这里完成本教程，但我收到有关 LocalStorage 适配器的控制台错误（"未捕获的引用错误：未定义存储。 它与这一行有关：

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

Answer 1

想

通了。 我需要从这里下载本地存储库。 将其下载到我的项目目录中的 lib 文件夹中，并按照自述文件中的说明要求我的 HTML 中的文件。