问一个Backbone的JS问题
我在学习Backbone，按自己的想法写了一个demo，但是添加功能没有起作用，代码如下，麻烦大家看看是什么问题。
HTML部分：
<div id="container">
<h1>Backbone demo</h1>
<div>
<input id="firstName" placeholder="First Name" />
<input id="lastName" placeholder="Last Name" />
<select id="city">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>San Francisco</option>
<option>Washington</option>
<option>Las Vegas</option>
</select>
<input id="job" placeholder="Job" />
<button id="add">Add new item</button>
</div>
<div>
<table id="dataList" style="border:solid 1px #aaa; border-collapse:collapse;">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Job</th>
<th>Action</th>
</tr>
</table>
</div>
</div>
<script type="text/template" id="item-template">
<td><%= Id%></td>
<td><%= FirstName%></td>
<td><%= LastName%></td>
<td><%= City%></td>
<td><%- Job%></td>
<td><a href="javascript:;" title="Delete">Delete</a></td>
</script>
//define person model
var Person = Backbone.Model.extend({
defaults: {
Id: 0,
FirstName: 'unknown',
LastName: 'unknown',
City: 'unknown',
Job: 'unknown'
}
});
//define person collection
var PersonList = Backbone.Collection.extend({
model: Person
});
//create instances collection
var models = [
{
Id: 1,
FirstName: 'Bill',
LastName: 'Gates',
City: 'Seattle',
Job:'Software Engineer'
},
{
Id: 2,
FirstName: 'Jobs',
LastName: 'Steven',
City: 'San Franciscal',
Job: 'Software Engineer'
},
{
Id: 3,
FirstName: 'Mark',
LastName: 'Zurkberg',
City: 'New York',
Job: 'Software Engineer'
},
{
Id: 4,
FirstName: 'Larry',
LastName: 'Page',
City: 'California',
Job: 'Software Engineer'
},
{
Id: 5,
FirstName: 'San',
LastName: 'Carlos',
City: 'Chicago',
Job: 'Software Engineer'
}
];
var Persons = new PersonList(models);
var ListView = Backbone.View.extend({
template: _.template($('#item-template').html()),
tagName:'tr',
initialize: function () {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
remove: function () {
$(this.el).remove();
}
});
var PageView = Backbone.View.extend({
el: $('#dataList'),
events: {
'click button#add': 'addItemOninput'
},
initialize: function () {
_.bindAll(this, 'render', 'addItemOninput', 'appendItem');
this.collection = Persons;
this.collection.bind('add', this.appendItem,this);
this.counter = Persons.length;
this.render();
},
render:function(){
var self = this;
_(this.collection.models).each(function (item) {
self.appendItem(item);
}, this);
},
addItemOninput: function (item) {
var item = new Person();
item.set({
Id: this.counter + 1,
FirstName: $('#firstName').val(),
LastName: $('#lastName').val(),
City: $('#city').val(),
Job: $('#job').val()
});
console.log(item);
this.collection.add(item);
},
appendItem: function (item) {
var view = new ListView({ model: item });
$('#dataList').append(view.render().el);
},
updateItem: function () {
},
removeItem: function () {
}
});
var pageView = new PageView();
<!DOCTYPE>
<html>
<head>
<title> Test </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script src="js/json2.js"></script>
<script src="js/jquery.js"></script>
<script src="js/underscore.js"></script>
<script src="js/backbone.js"></script>
<script>
$(function(){
//define person model
var Person = Backbone.Model.extend({
defaults: {
Id: 0,
FirstName: 'unknown',
LastName: 'unknown',
City: 'unknown',
Job: 'unknown'
}
});
//define person collection
var PersonList = Backbone.Collection.extend({
model: Person
});
//create instances collection
var models = [
{
Id: 1,
FirstName: 'Bill',
LastName: 'Gates',
City: 'Seattle',
Job:'Software Engineer'
},
{
Id: 2,
FirstName: 'Jobs',
LastName: 'Steven',
City: 'San Franciscal',
Job: 'Software Engineer'
},
{
Id: 3,
FirstName: 'Mark',
LastName: 'Zurkberg',
City: 'New York',
Job: 'Software Engineer'
},
{
Id: 4,
FirstName: 'Larry',
LastName: 'Page',
City: 'California',
Job: 'Software Engineer'
},
{
Id: 5,
FirstName: 'San',
LastName: 'Carlos',
City: 'Chicago',
Job: 'Software Engineer'
}
];
var Persons = new PersonList(models);
var ListView = Backbone.View.extend({
template: _.template($('#item-template').html()),
tagName:'tr',
initialize: function () {
this.model.bind('change', this.render, this);
this.model.bind('destroy', this.remove, this);
},
render: function () {
$(this.el).html(this.template(this.model.toJSON()));
return this;
},
remove: function () {
$(this.el).remove();
}
});
var PageView = Backbone.View.extend({
el: $('#container'),
statsTemplate:_.template(""),
events: {
'click #add': 'addItemOninput'
},
initialize: function () {
_.bindAll(this, 'render', 'addItemOninput', 'appendItem');
this.collection = Persons;
this.collection.bind('add', this.appendItem,this);
this.counter = Persons.length;
this.render();
},
render:function(){
var self = this;
_(this.collection.models).each(function (item) {
self.appendItem(item);
}, this);
},
addItemOninput: function (item) {
var item = new Person();
item.set({
Id: this.counter + 1,
FirstName: $('#firstName').val(),
LastName: $('#lastName').val(),
City: $('#city').val(),
Job: $('#job').val()
});
console.log(item);
// this.collection.add(item);
Persons.add(item);
},
appendItem: function (item) {
var view = new ListView({ model: item });
$('#dataList').append(view.render().el);
},
updateItem: function () {
},
removeItem: function () {
}
});
var pageView = new PageView();
});
</script>
</head>
<body>
<div id="container">
<h1>Backbone demo</h1>
<div id="head">
<input id="firstName" placeholder="First Name" />
<input id="lastName" placeholder="Last Name" />
<select id="city">
<option>New York</option>
<option>Los Angeles</option>
<option>Chicago</option>
<option>Houston</option>
<option>Philadelphia</option>
<option>San Francisco</option>
<option>Washington</option>
<option>Las Vegas</option>
</select>
<input id="job" placeholder="Job" />
<input type="button" id="add" value="Add new item" />
</div>
<div>
<table id="dataList" style="border:solid 1px #aaa; border-collapse:collapse;">
<tr>
<th>Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>City</th>
<th>Job</th>
<th>Action</th>
</tr>
</table>
</div>
<script type="text/template" id="item-template">
<td><%- Id%></td>
<td><%- FirstName%></td>
<td><%- LastName%></td>
<td><%- City%></td>
<td><%- Job%></td>
<td><a href="javascript:;" title="Delete">Delete</a></td>
</script>
</div>
</body>
</html>
