Backbone.js学习笔记

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 error


view
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() });