嘿，所以我正在尝试让这个 Backbone.js 示例运行...这是 todo 项目的原始文件：
main.js 文件
(function() {
window.App = {
Models: {},
Collections: {},
Views: {},
Router: {}
//Routes, Templates
};
//App.Helpers = {};
//App.Helpers.template = ...
window.template = function(id) {
return _.template($('#' + id).html());
}
App.Router = Backbone.Router.extend({
routes: {
}
});
App.Models.Task = Backbone.Model.extend({
default: {
title: '',
completed: false
},
});
App.Views.Task = Backbone.View.extend({
tagName: 'p',
template: template('taskTemplate'),
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .edit': 'editTask',
'click .delete': 'destroy',
'click .checked': 'checked'
},
editTask: function() {
var newTaskTitle = prompt('wata change to', this.model.get('title'));
this.model.set('title', newTaskTitle);
if(!newTaskTitle) return;
this.model.set('title', newTaskTitle);
},
destroy: function() {
this.model.destroy();
},
render: function() {
var template = this.template(this.model.toJSON());
this.$el.html(template);
return this;
},
remove: function() {
this.$el.remove();
},
checked: function() {
console.log(this.$el.hasClass('taskComplete'));
if( $('.checked:checked') && !this.$el.hasClass('taskComplete')) {
this.$el.addClass('taskComplete');
} else {
this.$el.removeClass('taskComplete');
}
}
});
App.Collections.Tasks = Backbone.Collection.extend({
model: App.Models.Task
});
App.Views.Tasks = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this)
},
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(task) {
var taskView = new App.Views.Task({model: task});
this.$el.append(taskView.render().el);
}
});
App.Views.AddTask = Backbone.View.extend({
el: '#addtask',
events: {
'submit': 'submit'
},
initialize: function() {
},
submit:function(e) {
e.preventDefault();
var newTaskTitle = $(e.currentTarget).find('input[type=text]').val();
var task = new App.Models.Task({title: newTaskTitle});
console.log(this.collection);
this.collection.add(task);
}
});
var tasks = new App.Collections.Tasks ([
{
title: 'Go to the store',
priority: 4
},
{
title: 'Go to the mall',
priority: 3
},
{
title: 'Go to work',
priority: 5
},
]);
var addTaskView = new App.Views.AddTask({collection: tasks });
var tasksView = new App.Views.Tasks({collection: tasks});
$('.tasks').html(tasksView.render().el);
}) ();
这是html：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.taskComplete {
text-decoration: line-through;
}
</style>
<h1> My Tasks </h1>
<form id="addtask" action="">
<input type="text" placeholder="new task">
<input type="submit" value="Add Task">
</form>
<div class="tasks">
<script id='taskTemplate' type='text/template'>
<input class='checked' type="checkbox">
<span> <%= title %> </span>
<button class='edit'> Edit </button>
<button class='delete'> Delete </button>
</script>
</div>
<script src="js/underscore.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/backbone.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
我尝试使用 require.js 将它们分成单独的文件，如下所示：（将其命名为 user 以便更容易区分其他文件）
这是模板文件：user.html
<input class='checked' type="checkbox">
<span> <%= title %> </span>
<button class='edit'> Edit </button>
<button class='delete'> Delete </button>
这是 /models/user.js
define([
'underscore',
'backbone'
], function(_, Backbone) {
var user = Backbone.Model.extend({
default: {
title: '',
completed: false
},
});
return user;
});
这是用户集合 /collections/user
define([
'jquery',
'underscore',
'backbone',
'models/user'
], function($, _, Backbone, userM){
var users = Backbone.Collection.extend({
model: userM
});
return users;
});
这是用户视图：
define([
'jquery',
'underscore',
'backbone',
// Pull in the Collection module from above,
'models/user'
'text!templates/user.html'
], function($, _, Backbone, userM, userT){
var user = Backbone.View.extend({
tagName: 'p',
template: template('taskTemplate'),
initialize: function() {
this.model.on('change', this.render, this);
this.model.on('destroy', this.remove, this);
},
events: {
'click .edit': 'editTask',
'click .delete': 'destroy',
'click .checked': 'checked'
},
editTask: function() {
var newTaskTitle = prompt('wata change to', this.model.get('title'));
this.model.set('title', newTaskTitle);
if(!newTaskTitle) return;
this.model.set('title', newTaskTitle);
},
destroy: function() {
this.model.destroy();
},
render: function() {
var template = this.template(this.model.toJSON());
this.$el.html(template);
return this;
},
remove: function() {
this.$el.remove();
},
checked: function() {
console.log(this.$el.hasClass('taskComplete'));
if( $('.checked:checked') && !this.$el.hasClass('taskComplete')) {
this.$el.addClass('taskComplete');
} else {
this.$el.removeClass('taskComplete');
}
}
});
return user;
});
这是用户视图：
define([
'jquery',
'underscore',
'backbone',
// Pull in the Collection module from above,
'models/user',
'views/user',
'collections/users',
'text!templates/user.html'
], function($, _, Backbone, userM, userV, userC){
var users = Backbone.View.extend({
tagName: 'ul',
initialize: function() {
this.collection.on('add', this.addOne, this)
},
render: function() {
this.collection.each(this.addOne, this);
return this;
},
addOne: function(userM) {
var userView = new userV({model: userM});
this.$el.append(userView.render().el);
}
return users;
});
});
这是 index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<style>
.taskComplete {
text-decoration: line-through;
}
</style>
<h1> My Tasks </h1>
<form id="addtask" action="">
<input type="text" placeholder="new task">
<input type="submit" value="Add Task">
</form>
<div class="tasks">
</div>
<script src="js/libs/underscore.min.js"></script>
<script src="js/libs/jquery.min.js"></script>
<script src="js/libs/backbone.min.js"></script>
<script src="js/libs/require.js"></script>
<script src="js/views/users.js"></script>
</body>
</html>
当我尝试分离文件时，我很确定我做错了什么......