我刚开始学习Backbone.js。在学习模型，收集等时，我正在制作一个在网站上描述的“待办事项”应用程序。代码如下。您可以将其保存为html文件并使用浏览器打开它。您可以通过文本框添加一些任务。现在，当我点击“show pending”或“show completed”时，它给了我在标题中写的错误。请帮助我。谢谢。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>To do app in Backbone.js</title>
<style type="text/css">
#todoapp ul {
list-style-type: none; /* Hides bullet points from todo list */
}
#todo-list input.edit {
display: none; /* Hides input box*/
}
#todo-list .editing label {
display: none; /* Hides label text when .editing*/
}
#todo-list .editing input.edit {
display: inline; /* Shows input text box when .editing*/
}
</style>
</head>
<body>
<!-- ========= -->
<!-- Your HTML -->
<!-- ========= -->
<!-- <div id="container">Loading...</div> -->
<section id="todoapp">
<header id="header">
<h1>Todos</h1>
<input id="new-todo" placeholder="What needs to be done?">
<div>
<a href="#/">show all</a> |
<a href="#/pending">show pending</a> |
<a href="#/completed">show completed</a>
</div>
</header>
<section id="main">
<ul id="todo-list"></ul>
</section>
</section>
<script type="text/template" id="item-template">
<div class="view">
<input class="toggle" type="checkbox" <%= completed ? 'checked' : '' %>>
<label><%- title %></label>
<input class="edit" value="<%- title %>">
<button class="destroy">remove</button>
</div>
</script>
<!-- ========= -->
<!-- Libraries -->
<!-- ========= -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.0/underscore-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js" type="text/javascript"></script>
<!-- =============== -->
<!-- Javascript code -->
<!-- =============== -->
<script type="text/javascript">
// your JS code goes here
'use strict';
var app = {}; // create namespace for our app
app.Todo = Backbone.Model.extend({
defaults: {
title: '',
completed: false
},
toggle : function(){
this.save({completed : !this.get('completed')});
}
});
app.TodoList = Backbone.Collection.extend({
model: app.Todo,
localStorage: new Store("backbone-todo"),
completednew: function() {
debugger;
return this.filter(function( todo ) {
return todo.get('completed'); **//Error in this function after this line**
});
},
remaining: function() {
return this.without.apply( this, this.completednew() );
}
});
// instance of the Collection
app.todoList = new app.TodoList();
app.TodoView = Backbone.View.extend({
tagName: 'li',
template: _.template($('#item-template').html()),
render: function(){
this.$el.html(this.template(this.model.toJSON()));
this.input = this.$('.edit');
return this; // enable chained calls
},
initialize:function(){
this.model.on('change',this.render,this);
this.model.on('destroy',this.remove,this);
},
events:{
'dblclick label' : 'edit',
'keypress .edit' : 'updateOnEnter',
'blur .edit' : 'close',
'click .destroy' : 'destroy',
'click .toggle' : 'toggleCompleted'
},
edit : function(){
alert('edit called');
this.$el.addClass('editing');
this.input.focus();
},
updateOnEnter : function(e){
if(e.which == 13){
this.close();
}
},
close : function(){
var value = this.input.val().trim();
if(value){
this.model.save({title : value});
}
this.$el.removeClass('editing');
},
destroy : function(){
this.model.destroy();
},
toggleCompleted : function(){
//alert('toggleCompleted');
this.model.toggle();
}
});
// var view = new app.TodoView({model: todo});
app.AppView = Backbone.View.extend({
el: '#todoapp',
initialize: function () {
this.input = this.$('#new-todo');
// when new elements are added to the collection render then with addOne
app.todoList.on('add', this.addOne, this);
app.todoList.on('reset', this.addAll, this);
app.todoList.fetch(); // Loads list from local storage
},
events: {
'keypress #new-todo': 'createTodoOnEnter'
},
createTodoOnEnter: function(e){
if ( e.which !== 13 || !this.input.val().trim() ) { // ENTER_KEY = 13
return;
}
app.todoList.create(this.newAttributes());
this.input.val(''); // clean input box
},
addOne: function(todo){
// alert('one called');
var view = new app.TodoView({model: todo});
$('#todo-list').append(view.render().el);
},
addAll: function(){
// alert('all called');
this.$('#todo-list').html(''); // clean the todo list
switch(window.filter){
case 'completed' :
_.each(app.todoList.completednew(),this);
break;
case 'pending' :
_.each(app.todoList.remaining(),this);
break;
default :
app.todoList.each(this.addOne, this);
break;
}
},
newAttributes: function(){
return {
title: this.input.val().trim(),
completed: false
}
}
});
app.Router = Backbone.Router.extend({
routes:{
'*filter' : 'setFilter'
},
setFilter : function(param){
console.log('app.router.param = ' + param);
window.filter = param.trim() || '';
app.todoList.trigger('reset');
}
});
//--------------
// Initializers
//--------------
app.router = new app.Router();
Backbone.history.start();
app.appView = new app.AppView();
</script>
</body>
</html>