我正在尝试阅读本教程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()