http://documentcloud.github.com/backbone

 

var todoItem = new TodoItem();
todoItem.url = '/todo';
todoItem.fetch();
todoItem.get('description')var TodoItem = Backbone.Model.extend({urlRoot: '/todos' });
var todoItem = new TodoItem({id:1});
todoItem.fetch();
todoItem.set({description: 'Pick up cookies.'});
todoItem.save();
todoItem.get('id');
todoItem.destroy();var TodoItem = Backbone.Model.extend({defaults: {description: 'Empty todo .. ',status: 'incomplete'}
});
注：defaults ,不是default, 用: 不是用=todoItem.on('event-name',function(){alert('event-name happend!');
});todoItem.on('change',doThing);
todoItem.set({description: 'File prescription'});
todoItem.set({description: 'File prescription'},{silent: true});
todoItem.off('change',doThing);
change change:<attr> destroy sysc errorview
var SimpleView = Backbone.view.extend({});
var simpleView = new SimpleView();
console.log(simpleView.el);
<div></div>
var SimpleView = Backbone.view.extend({tagName: 'li'});
var simpleView = new SimpleView();
console.log(simpleView.el);
<li></li>var TodoView = Backbone.view.extend({tagName: 'li'});
var todoView = new TodoView();
console.log(todoView.el);
$(todoView.el).html();
todoView.$el.html();var TodoView = Backbone.View.extend({tagName: 'article',id: 'todo-view',className: 'todo',template: _.template('<h3>' +'<input type=checkbox ' +'<% if(status === "complete") print("checked") %>'+<%= description %></h3>'),render: function(){var attributes = this.model.toJSON();$(this.el).html(this.template(attributes));},events: {'click h3': 'alertStatus','change input': 'toggleStatus'},initialize: function(){this.model.on('change',this.render,this);this.model.on('destroy',this.render,this);},remove: function(){this.$el.remove();},alertStatus: function(e){alert('Hey you clicked the h3!');},toggleStatus: function(e){this.model.toggleStatus();this.render();}});var TodoItem = Backbone.Model.extend({toggleStatus: function(){if(this.model.get('status')==='incomplete'){this.model.set({'status': 'complete'});}else{this.model.set({'status': 'incomplete'});}this.save();}
}; .complete {color: #bbb;text-decoration: line-through;
}var todoView = new TodoView({ model: todoItem });
todoView.render();
console.log(todoView.el);
this.$el.(delegate('h3','click',alertStatus);underscore.js<h3><%= description %></h3>
mustache.js<h3>{{description}}</h3>
haml-js%h3= description
eco <h3><%= description %></h3>var TodoList = Backbone.Collection.extend({url: '/todos',model: TodoItem
});
var todoList = new TodoList();
todoList.length;	不是一个function,所以不加()	
todoList.add(todoItem1);
todoList.at(0);		index
todoList.get(1);	id
todoList.remove(todoItem1);
var todos = [{description: 'Pick up milk.', status: 'incomplete' },{description: 'Get a car wash.', status: 'incomplete' },{description: 'Learn Backbone.', status: 'incomplete' }
];todoList.reset(todos);
todoList.fetch();
todoList.on('reset',doThing);
todoList.fetch();
todoList.reset();
todoList.fetch({silent: true});
todoList.reset({silent: true});
todoList.off('reset',doThing);
todoList.forEach(function(todoItem){alert(todoItem.get('description));
});
todoList.map(function(todoItem){return todoItem.get('description');
});
todoList.filter(function(todoItem){return todoItem.get('status') === "incomplete";
});var TodoListView = Backbone.View.extend({initialize: function(){this.collection.on('add',this.addOne,this);},render: function(){this.collection.forEach(this.addOne,this);},addOne: function(todoItem){var todoView = new TodoView({model: todoItem});this.$el.append(todoView.render().el);}
});
var todoListView = new TodoListView({collection: todoList},
);var newTodoItem = new TodoItem({description: 'Take out trash.',status: 'incomplete'
});
todoList.add(newTodoItem);
todoListView.render();
console.log(todoListView.el);var TodoRouter = Backbone.Router.extend({routes: { "": "index", "todos/:id","show" },index:  function(){ this.todoList.fetch(); },show:   function(id){ this.todoList.focusOnTodoItem(id); },initizlize: function(options){ this.todoList = options.todoList; }
});
<a href='#todos/1'> go </a>
search/:query 		search/ruby 		query = 'ruby'
search/:query/p:page 	search/ruby/p2		query = 'ruby',page = 2
folder/:name-:mode	folder/foo-r		name ='foo',mode='r'
file/*path		file/hello/world.txt	path = 'hello/world.txt'
router.navigate("/todos/1",{trigger: true
});Backbone.history.start(); #->router.navigate("/todos/1")->#todos/1
Backbone.history.start({pushState: true}); #router.navigate("/todos/1")->todos/1
router.navigate("appointments/1",{trigger:true });var TodoApp = new (Backbone.Router.extend({
routes: {"":"index","todos/:id":"show"},
initialize: function(){this.todoList = new TodoList();this.todosView = new TodoListView({collection: this.todoList });$('#app').append(this.todosView.el);
},
start: function(){ Backbone.history.start({pushState: true}); },
index: function(){ this.todoList.fetch(); },
show:  function(){ this.todoList.focusOnTodoItem(id); }
}));$(function(){ AppRouter.start() });