最近在学习backbone 这是我的学习笔记
发布于 12 年前 作者 w3hacker 5910 次浏览 最后一次编辑是 8 年前

//代码1 //console.log(.functions(Backbone));//[“Collection”,“History”,“Model”,“Router”,“View”,“noConflict”,“setDomLibrary”,“sync”,“wrapError”] //console.log(.functions(Backbone.Events));//[“bind”,“off”,“on”,“trigger”,“unbind”]

//console.log(function(){} == function(){});//false???

/*代码2 var obj = {}; _.extend(obj,Backbone.Events);

obj.on(‘hack’,function(data){ console.log('I’m hacked by '+data); });

obj.trigger(‘hack’,‘Musikar’);//I’m hacked by Musikar */

/*代码3 var obj = { handler:function(){ console.log(this === obj); } }; _.extend(obj,Backbone.Events);

obj.on(‘hacker:start hacker:stop’,obj.handler,obj);

obj.trigger(‘hacker:start’,‘Musikar’);//true obj.trigger(‘hacker:stop’,‘Musikar’);//true */

/*代码4 var obj = {}; _.extend(obj,Backbone.Events);

obj.on(‘all’,function(){ console.log(Math.random()); });

obj.trigger(‘fuck’); obj.trigger(‘fuck:me’); */

/*代码4 var obj = {}; _.extend(obj,Backbone.Events);

obj.on(‘connection message disconnect’,function(){ console.log(‘connection’); });

obj.trigger(‘connection message disconnect’); */

//console.log(Backbone.Model.toString()); /*

function (attributes, options) { var defaults; attributes || (attributes = {}); if (options && options.parse) { attributes = this.parse(attributes); } if ((defaults = getValue(this, “defaults”))) { attributes = _.extend({}, defaults, attributes); } if (options && options.collection) { this.collection = options.collection; } this.attributes = {}; this._escapedAttributes = {}; this.cid = _.uniqueId(“c”); this.changed = {}; this._silent = {}; this._pending = {}; this.set(attributes, {silent: true}); this.changed = {}; this._silent = {}; this._pending = {}; this._previousAttributes = _.clone(this.attributes); this.initialize.apply(this, arguments); }

*/

console.clear(); //console.dir(Backbone.Model.prototype); /*

_pending null

_silent null

changed null

idAttribute “id”

constructor function()

_validate function()

bind function()

change function()

changedAttributes function()

clear function()

clone function()

destroy function()

escape function()

fetch function()

get function()

has function()

hasChanged function()

initialize function()

isNew function()

isValid function()

off function()

on function()

parse function()

previous function()

previousAttributes function()

save function()

set function()

toJSON function()

trigger function()

unbind function()

unset function()

url function()

*/

/* var Sidebar = Backbone.Model.extend({ setColor:function(color){ this.set({ color:color }); } });

window.sidebar = new Sidebar;

sidebar.on(‘change:color’, function(model, color) { $(’#sidebar’).css({background: color}); });

$(’#color’).keyup(function(){

sidebar.setColor(this.value);
$('#sidebar').html('<span style="background:#fff;color:'+this.value+';">'+this.value+'</span>');

});

<div id=“sidebar” style=“height:50px;background:#e8efff;”></div> <input type=“text” name="" id=“color” />

*/

/* constructor / initializenew Model([attributes], [options]) var demo = Backbone.Model.extend({ constructor:function(){ console.log(‘constructing…’); }, initialize:function(){ console.log(‘initilizing…’); }, property:function(x,y){ console.log(arguments.callee.length);//2 } },{ classMethod:function(x,y,z){ console.log(arguments.callee.length);//3 } });

console.log(typeof demo.property);//undefined console.log(typeof (new demo).property);//function console.log(typeof demo.classMethod);//function

demo.classMethod();//3 (new demo).property();//2 */

/*

var Demo1 = Backbone.Model.extend({ hello:function(){ console.log(‘hello’); } });

var Demo2 = Demo1.extend({ hello:function(){ console.log(‘world’); } });

var d1 = new Demo1(); var d2 = new Demo2();

console.log(d1 instanceof Demo1);//true console.log(d2 instanceof Demo2);//true console.log(d2 instanceof Demo1);//true

//d2.hello();//world

var Demo2 = Demo1.extend({ hello:function(){ Demo1.prototype.hello.call(this); console.log(‘world’); } });

var d2 = new Demo2();

d2.hello();//world

*/

/* var Demo = Backbone.Model.extend({ constructor:function(){ console.log(‘Demo’s constructor.’); } });

var D = Demo.extend({ constructor:function(){ console.log(Demo.prototype.constructor.toString()); console.log(‘D’s constructor.’); } });

new D; */

/*Backbone.Model.get var Demo = Backbone.Model.extend({

});

var d = new Demo({ name:‘PG’, age:21 },{ collection:‘beauty’ });

console.log(d.get(‘name’));//PG console.log(d.get(‘age’));//21

*/

/*Backbone.Model.set / Backbone.Model.on var Demo = Backbone.Model.extend({

});

var d = new Demo({ name:‘PG’, age:21 },{ collection:‘beauty’ });

d.on(‘change:name change:age’,function(){

console.log(arguments[0] === d);//true
console.log(arguments[1]);//new data
console.log(arguments[2]);//changes


console.log(Math.random());

});

d.set(‘name’,‘Hacker’);//用法1

d.set({ ‘name’:‘Musikar’, ‘age’:‘31’ });//用法2 触发两次change事件

*/

/* Backbone.Model.validate / Backbone.Model. var Demo = Backbone.Model.extend({ validate:function(attrs){ if(attrs.name.length > 2){ return ‘不能设置大于2的值’; }

	if(attrs.age > 30){
		return '年龄太大了';
	}
}

});

var d = new Demo({ name:‘PG’, age:21 },{ collection:‘beauty’ });

d.on(‘change:name change:age’,function(){

console.log(Math.random());

});

var ret = d.set({ name:‘a’, age:40 });

console.log(‘返回值:’,ret);//false

var ret = d.set({ name:‘a’, age:22 });

console.log(‘返回值:’,ret === d);//true 返回Model的引用 */

/*Backbone.Model.set var Demo = Backbone.Model.extend({ validate:function(attrs){ console.log(attrs); if(attrs.age > 30){ return ‘年龄太大了’; }

	if(attrs.name != 'PG'){
		return '你不是PG';
	}
}

});

var d = new Demo({ name:‘PG’, age:100 });

d.on(‘error’,function(m,errorMsg,obj){ console.log(errorMsg); });

d.set({ age:31 },{ silent:true, error:function(){ console.log(‘不会触发error事件’);//不会触发error事件 } });

d.set(‘name’,‘Musikar’);//年龄太大了 console.log(d.get(‘age’));//31 */

/*Backbone.Model.escape var hacker = new Backbone.Model({ name:’<script>alert(“xss”);</script>’ });

console.log(hacker.get(‘name’));//<script>alert(“xss”);</script> console.log(hacker.escape(‘name’));//<script>alert(“xss”);</script> */

/*Backbone.Model.has var hacker = new Backbone.Model({ name:‘PG’, age:30 });

console.log(hacker.has(‘name’));//true console.log(hacker.has(‘gender’));//false */

/*Backbone.Model.unset var hacker = new Backbone.Model({ name:‘PG’, age:21 });

console.log(hacker.has(‘name’));//true hacker.unset(‘name’); console.log(hacker.has(‘name’));//false */

/*Backbone.Model.clear var hacker = new Backbone.Model({ name:‘Musikar’, age:22 });

hacker.on(‘change’,function(){ //console.log(arguments[0] === hacker);//true console.log(arguments[1].changes);//Object { name=true,age=true } });

hacker.clear({ //silent:true });

console.log(hacker.get(‘name’));//undefined */

/*Backbone.Model.id var hacker = new Backbone.Model({ name:‘Musikar’, id:‘hacker’ });

console.log(hacker.name);//undefined console.log(hacker.id);//hacker */

/*Backbone.Model.idAttribute var Hacker = Backbone.Model.extend({ idAttribute:’_id’ });

var hacker = new Hacker({ ‘_id’:1, ‘name’:‘Musikar’ });

console.log(hacker.id);//1 */

/*Backbone.Model.cid var Hacker = Backbone.Model.extend({ idAttribute:’_id’ });

var hacker = new Hacker({ ‘_id’:1, ‘name’:‘Musikar’ });

var hacker2 = new Hacker({ ‘_id’:1, ‘name’:‘Musikar’ });

console.log(hacker.cid,hacker2.cid);//c0,c1 */

/*Backbone.Model.attributes var Hacker = Backbone.Model.extend({

});

var hacker = new Hacker({ name:‘Musikar’, age:100 });

console.log(hacker.attributes);//Object { name=“Musikar”,age=100 } */

/*Backbone.Model.changed var Hacker = Backbone.Model.extend({

});

var hacker = new Hacker({ name:‘Musikar’, age:100 });

hacker.on(‘change:name’,function(){ console.log(this.changed);//Object { name=“Hacker” } console.log(hacker.changedAttributes());//Object { name=“Hacker” } });

hacker.set(‘name’,‘Hacker’); */

/*Backbone.Model.attributes var Hacker = Backbone.Model.extend({ defaults:{ name:‘PG’, age:21, gender:‘female’ } });

var hacker = new Hacker({ name:‘Musikar’ }); console.log(hacker.attributes);//Object { name=“Musikar”,age=21,gender=“female” } console.log(hacker.defaults);//Object { name=“PG”,age=21,gender=“female” } */

/*Backbone.Model.toJSON var hacker = new Backbone.Model({ name:‘Musikar’, age:100 });

console.log(hacker.toJSON());//Object { name=“Musikar”,age=100 } */

/* savemodel.save([attributes], [options]) / / Backbone.sync = function(method,model,options){ console.log(model.isNew()); console.log(method + ’ : ’ +JSON.stringify(model)); model.id = 1; };

var Hacker = Backbone.Model.extend({ validate:function(attrs){ console.log(‘validate:’,attrs); //return ‘验证失败’; } });

var hacker = new Hacker({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(‘change:’,arguments); });

hacker.on(‘sync’,function(){ console.log(‘sync:’,arguments); });

hacker.save(); console.clear(); //true //create : {“name”:“PG”,“age”:21} hacker.save(); //console.clear(); //false //update : {“name”:“PG”,“age”:21} hacker.save({name:‘Musikar’},{ success:function(){ console.log(‘success:’,arguments); }, error:function(){ console.log(‘error:’,arguments); } }); //Object { name=“Musikar”,age=21 } //changes //Object { name=true } //false //update : {“name”:“PG”,“age”:21} */

/*destroy model.destroy([options]) / / Backbone.sync = function(method,model){ console.log(method + ’ : ’ +JSON.stringify(model)); };

var Hacker = Backbone.Model.extend({ validate:function(attrs){ console.log(‘validate:’,attrs); //return ‘验证失败’; } });

var hacker = new Hacker({ name:‘PG’, age:21 });

hacker.on(‘destroy’,function(){ console.log(‘destroy:’,arguments); });

hacker.on(‘sync’,function(){ console.log(‘sync’,arguments); });

hacker.destroy({ wait:true, success:function(){ console.log(‘success:’,arguments); }, error:function(){ console.log(‘error:’,arguments); } }); */

/* validate model.validate(attributes) / / var Hacker = Backbone.Model.extend({ validate:function(attrs){ if(attrs.name.length < 4){ return ‘name不能少于4个字符’; }

	if(attrs.age > 30){
		return 'age不能大于30';
	}
}

});

var hacker = new Hacker({ name:‘hacker’, age:21 });

hacker.on(‘error’,function(){ console.log(‘on-error:’,arguments); });

hacker.set({ name:‘PG’ },{ error:function(){ console.log(‘set-error:’,arguments); } }); */

/* isValid model.isValid() / / var Hacker = Backbone.Model.extend({ validate:function(attrs){ if(attrs.name.length < 4){ return ‘name不能少于4个字符’; }

	if(attrs.age > 30){
		return 'age不能大于30';
	}
}

});

var hacker = new Hacker({ name:‘hacker’, age:21 });

hacker.set({ name:‘PG’, age:100 },{ silent:true });

console.log(hacker.attributes); console.log(hacker.isValid());//false */

/* url model.url() / / var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php/’ });

var hacker = new Hacker({ id:1, name:‘PG’, age:21 });

console.log(hacker.url());//ajax.php/1 hacker.save(); hacker.fetch(); */

/* urlRoot model.urlRoot or model.urlRoot() / / var Hacker = Backbone.Model.extend({ //urlRoot:’/hacker’ urlRoot:function(){ return ‘/hacker’; } });

var hacker = new Hacker({id:1}); console.log(hacker.url());// /hacker/1 */

/* parse model.parse(response) / / var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’, parse:function(data,xhr){ return data; } });

var hacker = new Hacker({ id:1, name:‘PG’, age:21 });

hacker.fetch({ success:function(){ console.log(hacker.attributes);//Object { id=1,name=“Musikar”,age=22 } } });

/ajax.php内容/ /*

<?php

$id = trim($_SERVER['PATH_INFO'],'/');

$arr = array(
	1=>array(
		'name'=>'Musikar',
		'age'=>22
	),
	2=>array(
		'name'=>'PG',
		'age'=>21
	)
);


echo json_encode($arr[$id]);

*/

/* clone model.clone() / / var Hacker = Backbone.Model.extend({

});

var hacker = new Hacker({ id:1, name:‘PG’, age:21, contacts:{ qq:‘389443626’, email:‘admin@w3hacker.com’, tel:‘18686128512’ } });

hacker.attributes.contacts.email = ‘389443626@qq.com’;

console.log(hacker.clone().attributes.contacts.email);//389443626@qq.com */

/* isNew model.isNew() / / var hacker = new Backbone.Model({ name:‘PG’, age:21 });

console.log(hacker.isNew());//true hacker.id = 1; console.log(hacker.isNew());//false */

/* change model.change() / / var hacker = new Backbone.Model({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(‘change:’,arguments); });

hacker.on(‘change:name’,function(){ console.log(‘change:name’,arguments); });

hacker.on(‘change:age’,function(){ console.log(‘change:age’,arguments); });

hacker.set({ name:‘Musikar’, age:22 },{ silent:true });

hacker.change(); */

/* hasChanged model.hasChanged([attribute]) / / var hacker = new Backbone.Model({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(hacker.hasChanged(‘name’));//true console.log(hacker.hasChanged(‘age’));//true });

hacker.set({ name:‘Musikar’, age:22 }); */

/* changedAttributes model.changedAttributes([attributes]) / / var hacker = new Backbone.Model({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(hacker.changedAttributes());//Object { name=“Musikar” } });

hacker.set({ name:‘Musikar’, age:21 });

*/

/* previous model.previous(attribute) / / var hacker = new Backbone.Model({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(this.previous(‘name’));//PG });

hacker.set({ name:‘Musikar’, age:21 }); */

/* previousAttributes model.previousAttributes() / / var Hacker = Backbone.Model.extend({ validate:function(attrs){ console.log(‘validate:’,attrs); return ‘validate fails’; } });

var hacker = new Hacker({ name:‘PG’, age:21 });

hacker.on(‘change’,function(){ console.log(this.previousAttributes());//Object { name=“PG”,age=21 } });

hacker.set({ name:‘Musikar’, age:22 },{ error:function(){ console.log(hacker.attributes); } });

*/

//=================================Backbone.Collection========================================

/* extend Backbone.Collection.extend(properties, [classProperties]) / / var Hackers = Backbone.Collection.extend({ property:‘value’ },{ classProperty:‘value’ });

var hackers = new Hackers(); console.log(hackers.property);//value console.log(Hackers.classProperty);//value */

/* model collection.model / / var Hacker = Backbone.Model.extend({

});

var hacker = new Hacker({ name:‘PG’, age:21 });

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers(); hackers.add(hacker); hackers.add({name:‘Musikar’,age:22}); console.log(hackers.models.length);//2 console.log(hackers.models[0].attributes);//Object { name=“PG”,age=21 } */

/* constructor / initializenew Collection([models], [options]) / / var Hacker = Backbone.Model.extend({

});

var hacker1 = new Hacker({ name:‘PG’, age:21 });

var hacker2 = new Hacker({ name:‘Musikar’, age:22 });

var Hackers = Backbone.Collection.extend({ initialize:function(){ console.log(‘initialize…’); } });

var hackers = new Hackers([hacker1,hacker2]); console.log(hackers.models[1].attributes);//Object { name=“Musikar”,age=22 }

var hackers = new Hackers([hacker1,hacker2],{ comparator:function(hacker){ return hacker.get(‘age’); } });

console.log(hackers.toJSON()); */

/* toJSON collection.toJSON() / / var collection = new Backbone.Collection([ {name: “PG”, age: 21}, {name: “Musikar”, age: 22} ]);

console.log(collection.models); console.log(JSON.stringify(collection)); console.log(collection.toJSON()); */

/* sync collection.sync(method, collection, [options]) */

/* add collection.add(models, [options]) / / var hackers = new Backbone.Collection({

});

hackers.on(‘add’,function(model,collection,options){ console.log(options.index); });

hackers.add([{name:‘PG’},{name:‘Musikar’}],{ //silent:true });

hackers.add({name:‘黑客’},{at:0}); console.log(hackers.toJSON()); */

/* remove collection.remove(models, [options]) / / var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({ name:‘Musikar’, age:22 });

var hacker2 = new Hacker({ name:‘Musikar’, age:22 });

var hackers = new Backbone.Collection({ model:Hacker });

hackers.on(‘remove’,function(model,collection,options){ console.log(hackers.models.length);//2?? });

hackers.add([hacker1,hacker2]); hackers.remove(hacker1); */

/* get collection.get(id) / / var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({ id:1, name:‘Musikar’, age:22 });

var hacker2 = new Hacker({ id:2, name:‘Musikar’, age:22 });

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.get(1).get(‘name’));//Musikar console.log(hackers.get(hacker1).get(‘name’));//Musikar */

/* getByCid collection.getByCid(cid) / / var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({ id:1, name:‘Musikar’, age:22 });

var hacker2 = new Hacker({ id:2, name:‘Musikar’, age:22 });

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.getByCid(‘c0’).attributes);//Object { id=1, name=“Musikar”, age=22 } console.log(hackers.getByCid(hacker1).attributes);//Object { id=1, name=“Musikar”, age=22 } */

/* at collection.at(index) / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

console.log(hackers.at(0).attributes);//Object { id=1, name=“PG”, age=21 } console.log(hackers.at(100));//undefined */

/* push collection.push(model, [options]) / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

hackers.push({ id:3, name:‘黑客’, age:110 });

console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=3, name=“黑客”, age=110 } */

/* pop collection.pop([options]) / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

hackers.pop(); console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=1, name=“PG”, age=21 } */

/* unshift collection.unshift(model, [options]) / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

hackers.unshift({ id:0, name:‘黑客’, age:119 });

console.log(hackers.at(0).attributes);//Object { id=0, name=“黑客”, age=119 } */

/* shift collection.shift([options]) / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

hackers.shift();

console.log(hackers.at(0).attributes);//Object { id=2, name=“Musikar”, age=22 } */

/* length collection.length / / var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({ model:Hacker });

var hackers = new Hackers([{ id:1, name:‘PG’, age:21 },{ id:2, name:‘Musikar’, age:22 }]);

console.log(hackers.length);//2 */

/* comparator collection.comparator */ /*代码1 var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({ model:Hacker, comparator:function(hacker){ return hacker.get(‘age’); } });

var hackers = new Hackers(); hackers.add({name:‘PG’,age:20}); hackers.add({name:‘Musikar’,age:18}); hackers.add({name:‘Hacker’,age:21});

console.log(hackers.pluck(‘age’));//[18,20,21] */

/*代码2 var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({ model:Hacker, comparator:function(hacker){ return hacker.get(‘name’).length; } });

var hackers = new Hackers(); hackers.add({name:‘PG’,age:20}); hackers.add({name:‘Musikar’,age:18}); hackers.add({name:‘Hacker’,age:21});

console.log(hackers.pluck(‘name’));//[“PG”,“Hacker”,“Musikar”] */

/*代码3 var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({ model:Hacker, comparator:function(hacker){ return hacker.get(‘name’).length; } });

var hackers = new Hackers(); hackers.add({name:‘PG’,age:20}); hackers.add({name:‘Musikar’,age:18}); hackers.add({name:‘Hacker’,age:21});

console.log(hackers.pluck(‘name’));

hackers.at(0).set(‘name’,‘Penelope Garcia’);//[“PG”, “Hacker”, “Musikar”] console.log(hackers.pluck(‘name’));//[“Penelope Garcia”, “Hacker”, “Musikar”]

hackers.sort(); console.log(hackers.pluck(‘name’));//[“Hacker”, “Musikar”, “Penelope Garcia”] */

/*代码4 var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({ model:Hacker, comparator:function(hacker1,hacker2){ if(hacker1.get(‘name’).length > hacker2.get(‘name’).length){ return 1; }else if(hacker1.get(‘name’).length < hacker2.get(‘name’).length){ return -1; }else{ return 0; } } });

var hackers = new Hackers(); hackers.add({name:‘PG’,age:20}); hackers.add({name:‘Musikar’,age:18}); hackers.add({name:‘Hacker’,age:21});

console.log(hackers.pluck(‘name’));//[“PG”,“Hacker”,“Musikar”]

*/

/* sort collection.sort([options]) / / var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({ model:Hacker, comparator:function(hacker){ return hacker.get(‘name’).length; } });

var hackers = new Hackers(); hackers.add({name:‘PG’,age:20}); hackers.add({name:‘Musikar’,age:18}); hackers.add({name:‘Hacker’,age:21});

console.log(hackers.pluck(‘name’));

hackers.at(0).set(‘name’,‘Penelope Garcia’);//[“PG”, “Hacker”, “Musikar”] console.log(hackers.pluck(‘name’));//[“Penelope Garcia”, “Hacker”, “Musikar”]

hackers.on(‘reset’,function(){ console.log(‘reset…’); });

hackers.sort(); console.log(hackers.pluck(‘name’));//[“Hacker”, “Musikar”, “Penelope Garcia”] */

/* pluck collection.pluck(attribute) / / var hackers = new Backbone.Collection([ {name:‘PG’}, {name:‘Hacker’}, {name:‘Musikar’} ]);

console.log(hackers.pluck(‘name’));//[“PG”, “Hacker”, “Musikar”] */

/* where collection.where(attributes) / / var hackers = new Backbone.Collection([ {name:‘张三’,age:21}, {name:‘李四’,age:20}, {name:‘王五’,age:22}, {name:‘赵六’,age:20}, {name:‘马七’,age:20} ]);

console.log(hackers.where({age:20}).length);//3 */

/* url collection.url or collection.url() / / var Hacker = Backbone.Model.extend({ //url:‘test.php/’ });

var hacker = new Hacker({ id:2, name:‘Musikar’, age:22 });

var Hackers = Backbone.Collection.extend({ model:Hacker, url:‘ajax.php/’ });

var hackers = new Hackers(hacker); hacker.fetch();//http://www.demo.com/ajax.php/2 */

/* parse collection.parse(response) */

/* var Hacker = Backbone.Model.extend({

});

var hacker1 = new Hacker({ id:0, name:’’, age:0 });

var hacker2 = new Hacker({ id:0, name:’’, age:0 });

var Hackers = Backbone.Collection.extend({ model:Hacker, url:‘ajax.php/’,//[{“id”:1,“name”:“Musikar”,“age”:22},{“id”:2,“name”:“PG”,“age”:21}] parse:function(response){ console.log(response); } });

var hackers = new Hackers(); hackers.fetch({ success:function(){ //console.log(arguments); //console.log(hackers.toJSON()); } }); */

/* fetch collection.fetch([options]) / / reset collection.reset(models, [options]) / / var Hackers = Backbone.Collection.extend({ url:‘ajax.php’//[{“id”:1,“name”:“Musikar”,“age”:22},{“id”:2,“name”:“PG”,“age”:21}] });

var hackers = new Hackers({ id:0, name:‘Hacker’, age:20 });

hackers.on(‘reset’,function(){ //console.log(‘reset’,arguments); });

var xhr = hackers.fetch({ data:{page:3}, add:true, success:function(){ //hackers.reset(); console.log(hackers.toJSON());//[Object { id=1, name=“Musikar”, age=22}, Object { id=2, name=“PG”, age=21}] } });

//console.log(xhr); */

/* create collection.create(attributes, [options]) */

//====================================Backbone.Router==========================================

//====================================Backbone.sync==========================================

//console.log(Backbone.ajax);//undefined //console.log(Backbone.sync);

/* emulateHTTP Backbone.emulateHTTP = true / / Backbone.emulateHTTP = true;

var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’ });

var hacker = new Hacker({ id:1, name:‘Musikar’ });

hacker.save();//X-HTTP-Method-Override PUT */

/* emulateJSON Backbone.emulateJSON = true*/ /* Backbone.emulateJSON = true;

var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’ });

var hacker = new Hacker({ id:1, name:‘Musikar’ });

hacker.save();//model {“id”:1,“name”:“Musikar”} */

//====================================Backbone.View==========================================

//console.log(_.functions(new Backbone.View));//["$", “_configure”, “_ensureElement”, “bind”, “delegateEvents”, “initialize”, “make”, “off”, “on”, “remove”, “render”, “setElement”, “trigger”, “unbind”, “undelegateEvents”]

/* console.log(new Backbone.View({ el:‘body’ }));

console.log(new Backbone.View({ tagName:‘li’ }));

console.log(new Backbone.View({ className:‘demo’ }));

console.log(new Backbone.View({ id:‘demo’ }));

console.log(new Backbone.View({ attributes:{ style:‘color:red;’ } }).$el.constructor === jQuery);//true

new Backbone.View({ id:‘demo’, className:‘demo’, tagName:‘span’, attributes:{ style:‘color:red;’, href:‘http://www.w3hacker.com/’ } }).$el.text(‘demo’).appendTo(‘body’); */

/* make view.make(tagName, [attributes], [content]) / / var view = new Backbone.View(); var el = view.make(‘b’,{‘class’:‘demo’},‘Bold!’); console.log(el.constructor);//HTMLElement {} $(’#demo’).append(el); */

//=================================Utility================================

/* Backbone.noConflict / / console.log(Backbone.noConflict()); console.log(Backbone);//undefined */

/* Backbone.$ / / Backbone.$ = function(id){return document.getElementById(id);}

console.log(Backbone.$.toString()); /* function (id) { return document.getElementById(id); } */

/*Hello World var Hacker = Backbone.Model.extend({ name:‘undefined’ });

var Hackers = Backbone.Collection.extend({ model:Hacker, initialize:function(models,options){ this.bind(‘add’,options.view.addHacker); } });

var HackerList = Backbone.View.extend({ el:$(document), initialize:function(){ this.hackers = new Hackers(null,{view:this}); }, events:{ ‘keyup’:‘add’ }, add:function(evt){ //delete if(evt.keyCode==8){ $(’#hackers li:last’).remove(); return; } var hacker = new Hacker({name:String.fromCharCode(evt.keyCode)}); this.hackers.add(hacker); }, addHacker:function(model){ $(’#hackers’).append(’<li>’+model.get(‘name’)+’</li>’); } });

new HackerList();

/*HTML代码

<div id=“hack”>Add One Hacker</div> <ul id=“hackers”></ul>

*/

/* initialize、defaults、set var Hacker = Backbone.Model.extend({ initialize:function(){ console.log(‘initialize…’); }, defaults:{ name:‘Hacker’, qq:‘389443626’ } });

var hacker = new Hacker(); hacker.set({ name:‘Musikar’ }); console.log(hacker.toJSON());//Object { name=“Musikar”, qq=“389443626” } */

/* Backbone.Model里的方法 var Hacker = Backbone.Model.extend({ defaults:{ name:‘Hacker’ }, hack:function(website){ console.log(this.get(‘name’)+’ is hacking '+website); } });

var hacker = new Hacker(); hacker.hack(‘www.w3hacker.com’);//Hacker is hacking www.w3hacker.com */

/*监听属性的改变 var Hacker = Backbone.Model.extend({ initialize:function(){ this.bind(‘change:name’,function(){ console.log(arguments); }); }, defaults:{ name:‘Hacker’ } });

var hacker = new Hacker(); hacker.set({ name:‘Musikar’ }); */

/*属性验证 var Hacker = Backbone.Model.extend({ initialize:function(){ this.bind(‘error’,function(model,errorMsg){ document.title = errorMsg; }); }, validate:function(attrs){ if(attrs.name==’’){ return ‘name不能为空’; }else{ document.title = ‘name设置正确’; } } });

var hacker = new Hacker(); hacker.set({ name:‘Musikar’ }); */

/对象的获取和保存/ /* var Hacker = Backbone.Model.extend({ url:‘ajax.php/’ });

var hacker = new Hacker({ name:‘Musikar’, qq:‘389443626’ });

hacker.save();//POST {“name”:“Musikar”,“qq”:“389443626”} */

/* var hacker = new Hacker({ id:1, name:‘Musikar’, qq:‘389443626’ });

hacker.save();//PUT {“id”:1,“name”:“Musikar”,“qq”:“389443626”} */

/* var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’ });

var hacker = new Hacker({ id:2, name:‘PG’, age:21, gender:1 });

hacker.save(); */

/* fetch var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’ });

var hacker = new Hacker({ id:2, name:’’, age:’’, gender:’’ });

hacker.fetch({ success:function(model,json){ console.log(hacker.toJSON());//Object { id=“2”, name=“PG”, age=“21”, gender=“1” } } });

*/

/* ajax.php 页面代码

<?php

$json = file_get_contents('php://input');

$json = json_decode($json);

echo $json->name;

?>

or

<?php

echo $_SERVER['REQUEST_METHOD'];

?>

*/

/* var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’ });

var hacker = new Hacker({ id:2, name:’’, age:’’, gender:’’ });

hacker.fetch({ url:‘test.php’ }); */

//===============================Backbone.Collection===================================== /* var Hacker = Backbone.Model.extend({ urlRoot:‘ajax.php’, defaults:{

}

});

var Hackers = Backbone.Collection.extend({ url:‘ajax.php’, model:Hacker });

var h1 = new Hacker({title:‘Musikar’}); var h2 = new Hacker({title:‘PG’}); var h3 = new Hacker({title:‘黑客’});

var hackers = new Hackers(); //添加 hackers.add([h1,h2,h3]); console.log(hackers.toJSON());//[Object { title=“Musikar”}, Object { title=“PG”}, Object { title=“黑客”}] //删除 hackers.remove(h1); console.log(hackers.toJSON());//[Object { title=“PG”}, Object { title=“黑客”}] //遍历 hackers.each(function(model){ console.log(model.toJSON()); });

hackers.bind(‘reset’,function(){ hackers.each(function(hacker){ $(’#hackers’).append(’<li>’+hacker.get(‘name’)+’</li>’); }); });

hackers.fetch(); */


http://bbs.w3hacker.com 前端开发论坛 nodejs教程

6 回复

木有 Markdown 界面好丑…

//代码1
//console.log(_.functions(Backbone));//["Collection","History","Model","Router","View","noConflict","setDomLibrary","sync","wrapError"]
//console.log(_.functions(Backbone.Events));//["bind","off","on","trigger","unbind"]

//console.log(function(){} == function(){});//false???

/*代码2
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('hack',function(data){
	console.log('I\'m hacked by '+data);
});

obj.trigger('hack','Musikar');//I'm hacked by Musikar
*/

/*代码3
var obj = {
	handler:function(){
		console.log(this === obj);
	}
};
_.extend(obj,Backbone.Events);

obj.on('hacker:start hacker:stop',obj.handler,obj);

obj.trigger('hacker:start','Musikar');//true
obj.trigger('hacker:stop','Musikar');//true
*/

/*代码4
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('all',function(){
	console.log(Math.random());
});

obj.trigger('fuck');
obj.trigger('fuck:me');
*/

/*代码4
var obj = {};
_.extend(obj,Backbone.Events);

obj.on('connection message disconnect',function(){
	console.log('connection');
});

obj.trigger('connection message disconnect');
*/

//console.log(Backbone.Model.toString());
/*

function (attributes, options) {
    var defaults;
    attributes || (attributes = {});
    if (options && options.parse) {
        attributes = this.parse(attributes);
    }
    if ((defaults = getValue(this, "defaults"))) {
        attributes = _.extend({}, defaults, attributes);
    }
    if (options && options.collection) {
        this.collection = options.collection;
    }
    this.attributes = {};
    this._escapedAttributes = {};
    this.cid = _.uniqueId("c");
    this.changed = {};
    this._silent = {};
    this._pending = {};
    this.set(attributes, {silent: true});
    this.changed = {};
    this._silent = {};
    this._pending = {};
    this._previousAttributes = _.clone(this.attributes);
    this.initialize.apply(this, arguments);
}

*/

console.clear();
//console.dir(Backbone.Model.prototype);
/*

_pending
	null

_silent
	null

changed
	null

idAttribute
	"id"

	
constructor
	function()
	
_validate
	function()
	
bind
	function()
	
change
	function()
	
changedAttributes
	function()
	
clear
	function()
	
clone
	function()
	
destroy
	function()
	
escape
	function()
	
fetch
	function()
	
get
	function()
	
has
	function()
	
hasChanged
	function()
	
initialize
	function()
	
isNew
	function()
	
isValid
	function()
	
off
	function()
	
on
	function()
	
parse
	function()
	
previous
	function()
	
previousAttributes
	function()
	
save
	function()
	
set
	function()
	
toJSON
	function()
	
trigger
	function()
	
unbind
	function()
	
unset
	function()
	
url
	function()

*/


/*
var Sidebar = Backbone.Model.extend({
	setColor:function(color){
		this.set({
			color:color
		});
	}
});

window.sidebar = new Sidebar;

sidebar.on('change:color', function(model, color) {
	$('#sidebar').css({background: color});
});

$('#color').keyup(function(){
	
	sidebar.setColor(this.value);
	$('#sidebar').html('<span style="background:#fff;color:'+this.value+';">'+this.value+'</span>');
});



<div id="sidebar" style="height:50px;background:#e8efff;"></div>
<input type="text" name="" id="color" />

*/

/* constructor / initializenew Model([attributes], [options]) 
var demo = Backbone.Model.extend({
	constructor:function(){
		console.log('constructing...');
	},
	initialize:function(){
		console.log('initilizing...');
	},
	property:function(x,y){
		console.log(arguments.callee.length);//2
	}
},{
	classMethod:function(x,y,z){
		console.log(arguments.callee.length);//3
	}
});

console.log(typeof demo.property);//undefined
console.log(typeof (new demo).property);//function
console.log(typeof demo.classMethod);//function

demo.classMethod();//3
(new demo).property();//2
*/

/*

var Demo1 = Backbone.Model.extend({
	hello:function(){
		console.log('hello');
	}
});

var Demo2 = Demo1.extend({
	hello:function(){
		console.log('world');
	}
});

var d1 = new Demo1();
var d2 = new Demo2();

console.log(d1 instanceof Demo1);//true
console.log(d2 instanceof Demo2);//true
console.log(d2 instanceof Demo1);//true

//d2.hello();//world

var Demo2 = Demo1.extend({
	hello:function(){
		Demo1.prototype.hello.call(this);
		console.log('world');
	}
});

var d2 = new Demo2();

d2.hello();//world

*/

/*
var Demo = Backbone.Model.extend({
	constructor:function(){
		console.log('Demo\'s constructor.');
	}
});

var D = Demo.extend({
	constructor:function(){
		console.log(Demo.prototype.constructor.toString());
		console.log('D\'s constructor.');
	}
});

new D;
*/

/*Backbone.Model.get
var Demo = Backbone.Model.extend({
	
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

console.log(d.get('name'));//PG
console.log(d.get('age'));//21

*/


/*Backbone.Model.set / Backbone.Model.on
var Demo = Backbone.Model.extend({
	
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

d.on('change:name change:age',function(){
	
	console.log(arguments[0] === d);//true
	console.log(arguments[1]);//new data
	console.log(arguments[2]);//changes
	

	console.log(Math.random());
});

d.set('name','Hacker');//用法1 

d.set({
	'name':'Musikar',
	'age':'31'
});//用法2 触发两次change事件

*/

/* Backbone.Model.validate / Backbone.Model.
var Demo = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length > 2){
			return '不能设置大于2的值';
		}

		if(attrs.age > 30){
			return '年龄太大了';
		}
	}
});

var d = new Demo({
	name:'PG',
	age:21
},{
	collection:'beauty'	
});

d.on('change:name change:age',function(){

	console.log(Math.random());
});


var ret = d.set({
	name:'a',
	age:40
});

console.log('返回值:',ret);//false

var ret = d.set({
	name:'a',
	age:22
});

console.log('返回值:',ret === d);//true 返回Model的引用
*/



/*Backbone.Model.set
var Demo = Backbone.Model.extend({
	validate:function(attrs){
		console.log(attrs);
		if(attrs.age > 30){
			return '年龄太大了';
		}

		if(attrs.name != 'PG'){
			return '你不是PG';
		}
	}
});

var d = new Demo({
	name:'PG',
	age:100
});

d.on('error',function(m,errorMsg,obj){
	console.log(errorMsg);
});

d.set({
	age:31
},{
	silent:true,
	error:function(){
		console.log('不会触发error事件');//不会触发error事件
	}
});

d.set('name','Musikar');//年龄太大了
console.log(d.get('age'));//31
*/


/*Backbone.Model.escape
var hacker = new Backbone.Model({
	name:'<script>alert("xss");</script>'
});

console.log(hacker.get('name'));//<script>alert("xss");</script>
console.log(hacker.escape('name'));//&lt;script&gt;alert(&quot;xss&quot;);&lt;&#x2F;script&gt;
*/


/*Backbone.Model.has
var hacker = new Backbone.Model({
	name:'PG',
	age:30
});

console.log(hacker.has('name'));//true
console.log(hacker.has('gender'));//false
*/

/*Backbone.Model.unset
var hacker = new Backbone.Model({
	name:'PG',
	age:21
});

console.log(hacker.has('name'));//true
hacker.unset('name');
console.log(hacker.has('name'));//false
*/

/*Backbone.Model.clear
var hacker = new Backbone.Model({
	name:'Musikar',
	age:22
});

hacker.on('change',function(){
	//console.log(arguments[0] === hacker);//true
	console.log(arguments[1].changes);//Object { name=true,age=true }
});

hacker.clear({
	//silent:true
});

console.log(hacker.get('name'));//undefined
*/


/*Backbone.Model.id
var hacker = new Backbone.Model({
	name:'Musikar',
	id:'hacker'
});

console.log(hacker.name);//undefined
console.log(hacker.id);//hacker
*/

/*Backbone.Model.idAttribute
var Hacker = Backbone.Model.extend({
	idAttribute:'_id'
});

var hacker = new Hacker({
	'_id':1,
	'name':'Musikar'
});

console.log(hacker.id);//1
*/


/*Backbone.Model.cid
var Hacker = Backbone.Model.extend({
	idAttribute:'_id'
});

var hacker = new Hacker({
	'_id':1,
	'name':'Musikar'
});

var hacker2 = new Hacker({
	'_id':1,
	'name':'Musikar'
});

console.log(hacker.cid,hacker2.cid);//c0,c1
*/


/*Backbone.Model.attributes
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'Musikar',
	age:100
});

console.log(hacker.attributes);//Object { name="Musikar",age=100 }
*/


/*Backbone.Model.changed
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'Musikar',
	age:100
});

hacker.on('change:name',function(){
	console.log(this.changed);//Object { name="Hacker" }
	console.log(hacker.changedAttributes());//Object { name="Hacker" }
});

hacker.set('name','Hacker');
*/


/*Backbone.Model.attributes
var Hacker = Backbone.Model.extend({
	defaults:{
		name:'PG',
		age:21,
		gender:'female'
	}
});

var hacker = new Hacker({
	name:'Musikar'
});
console.log(hacker.attributes);//Object { name="Musikar",age=21,gender="female" }
console.log(hacker.defaults);//Object { name="PG",age=21,gender="female" }
*/

/*Backbone.Model.toJSON
var hacker = new Backbone.Model({
	name:'Musikar',
	age:100
});

console.log(hacker.toJSON());//Object { name="Musikar",age=100 }
*/

/* savemodel.save([attributes], [options])  */
/*
Backbone.sync = function(method,model,options){
	console.log(model.isNew());
	console.log(method + ' : ' +JSON.stringify(model));
	model.id = 1;
};

var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		//return '验证失败';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log('change:',arguments);
});

hacker.on('sync',function(){
	console.log('sync:',arguments);
});

hacker.save();
console.clear();
//true 
//create : {"name":"PG","age":21}
hacker.save();
//console.clear();
//false
//update : {"name":"PG","age":21}
hacker.save({name:'Musikar'},{
	success:function(){
		console.log('success:',arguments);
	},
	error:function(){
		console.log('error:',arguments);
	}
});
//Object { name="Musikar",age=21 }
//changes
//Object { name=true }
//false
//update : {"name":"PG","age":21}
*/

/*destroy   model.destroy([options]) */
/*
Backbone.sync = function(method,model){
	console.log(method + ' : ' +JSON.stringify(model));
};

var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		//return '验证失败';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('destroy',function(){
	console.log('destroy:',arguments);
});

hacker.on('sync',function(){
	console.log('sync',arguments);
});

hacker.destroy({
	wait:true,
	success:function(){
		console.log('success:',arguments);
	},
	error:function(){
		console.log('error:',arguments);
	}
});
*/

/* validate  model.validate(attributes) */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length < 4){
			return 'name不能少于4个字符';
		}

		if(attrs.age > 30){
			return 'age不能大于30';
		}
	}
});

var hacker = new Hacker({
	name:'hacker',
	age:21
});

hacker.on('error',function(){
	console.log('on-error:',arguments);
});

hacker.set({
	name:'PG'
},{
	error:function(){
		console.log('set-error:',arguments);
	}
});
*/


/* isValid   model.isValid() */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		if(attrs.name.length < 4){
			return 'name不能少于4个字符';
		}

		if(attrs.age > 30){
			return 'age不能大于30';
		}
	}
});

var hacker = new Hacker({
	name:'hacker',
	age:21
});

hacker.set({
	name:'PG',
	age:100
},{
	silent:true	
});

console.log(hacker.attributes);
console.log(hacker.isValid());//false
*/

/* url   model.url() */
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php/'
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21
});

console.log(hacker.url());//ajax.php/1
hacker.save();
hacker.fetch();
*/

/* urlRoot  model.urlRoot or model.urlRoot() */
/*
var Hacker = Backbone.Model.extend({
	//urlRoot:'/hacker'
	urlRoot:function(){
		return '/hacker';
	}
});

var hacker = new Hacker({id:1});
console.log(hacker.url());// /hacker/1
*/

/* parse  model.parse(response) */
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php',
	parse:function(data,xhr){
		return data;
	}
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21
});

hacker.fetch({
	success:function(){
		console.log(hacker.attributes);//Object { id=1,name="Musikar",age=22 }
	}
});

/*ajax.php内容*/
/*

<?php

	$id = trim($_SERVER['PATH_INFO'],'/');

	$arr = array(
		1=>array(
			'name'=>'Musikar',
			'age'=>22
		),
		2=>array(
			'name'=>'PG',
			'age'=>21
		)
	);


	echo json_encode($arr[$id]);

*/

/* clone  model.clone() */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	id:1,
	name:'PG',
	age:21,
	contacts:{
		qq:'389443626',
		email:'admin@w3hacker.com',
		tel:'18686128512'
	}
});

hacker.attributes.contacts.email = '389443626@qq.com';

console.log(hacker.clone().attributes.contacts.email);//389443626@qq.com
*/

/* isNew  model.isNew() */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

console.log(hacker.isNew());//true
hacker.id = 1;
console.log(hacker.isNew());//false
*/

/* change  model.change() */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log('change:',arguments);
});

hacker.on('change:name',function(){
	console.log('change:name',arguments);
});

hacker.on('change:age',function(){
	console.log('change:age',arguments);
});


hacker.set({
	name:'Musikar',
	age:22
},{
	silent:true	
});

hacker.change();
*/

/* hasChanged  model.hasChanged([attribute]) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(hacker.hasChanged('name'));//true
	console.log(hacker.hasChanged('age'));//true
});

hacker.set({
	name:'Musikar',
	age:22
});
*/


/* changedAttributes  model.changedAttributes([attributes]) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(hacker.changedAttributes());//Object { name="Musikar" }
});

hacker.set({
	name:'Musikar',
	age:21
});

*/

/* previous  model.previous(attribute) */
/*
var hacker =  new Backbone.Model({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(this.previous('name'));//PG
});

hacker.set({
	name:'Musikar',
	age:21
});
*/


/* previousAttributes  model.previousAttributes() */
/*
var Hacker = Backbone.Model.extend({
	validate:function(attrs){
		console.log('validate:',attrs);
		return 'validate fails';
	}
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

hacker.on('change',function(){
	console.log(this.previousAttributes());//Object { name="PG",age=21 }
});

hacker.set({
	name:'Musikar',
	age:22
},{
	error:function(){
		console.log(hacker.attributes);
	}	
});

*/

//=================================Backbone.Collection========================================


/* extend  Backbone.Collection.extend(properties, [classProperties]) */
/*
var Hackers = Backbone.Collection.extend({
	property:'value'
},{
	classProperty:'value'
});

var hackers = new Hackers();
console.log(hackers.property);//value
console.log(Hackers.classProperty);//value
*/

/* model  collection.model */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker = new Hacker({
	name:'PG',
	age:21
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();
hackers.add(hacker);
hackers.add({name:'Musikar',age:22});
console.log(hackers.models.length);//2
console.log(hackers.models[0].attributes);//Object { name="PG",age=21 }
*/

/* constructor / initializenew Collection([models], [options]) */
/*
var Hacker = Backbone.Model.extend({
	
});

var hacker1 = new Hacker({
	name:'PG',
	age:21
});

var hacker2 = new Hacker({
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	initialize:function(){
		console.log('initialize..');
	}
});

var hackers = new Hackers([hacker1,hacker2]);
console.log(hackers.models[1].attributes);//Object { name="Musikar",age=22 }

var hackers = new Hackers([hacker1,hacker2],{
	comparator:function(hacker){
		return hacker.get('age');
	}
});

console.log(hackers.toJSON());
*/

/* toJSON  collection.toJSON() */
/*
var collection = new Backbone.Collection([
	{name: "PG", age: 21},
	{name: "Musikar", age: 22}
]);

console.log(collection.models);
console.log(JSON.stringify(collection));
console.log(collection.toJSON());
*/

/* sync  collection.sync(method, collection, [options]) */



/* add  collection.add(models, [options]) */
/*
var hackers = new Backbone.Collection({
	
});

hackers.on('add',function(model,collection,options){
	console.log(options.index);
});

hackers.add([{name:'PG'},{name:'Musikar'}],{
	//silent:true
});

hackers.add({name:'黑客'},{at:0});
console.log(hackers.toJSON());
*/

/* remove  collection.remove(models, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	name:'Musikar',
	age:22
});

var hackers = new Backbone.Collection({
	model:Hacker
});

hackers.on('remove',function(model,collection,options){
	console.log(hackers.models.length);//2??
});

hackers.add([hacker1,hacker2]);
hackers.remove(hacker1);
*/

/* get  collection.get(id) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	id:1,
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.get(1).get('name'));//Musikar
console.log(hackers.get(hacker1).get('name'));//Musikar
*/


/* getByCid  collection.getByCid(cid) */
/*
var Hacker = Backbone.Model.extend({});

var hacker1 = new Hacker({
	id:1,
	name:'Musikar',
	age:22
});

var hacker2 = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers();

hackers.add([hacker1,hacker2]);

console.log(hackers.getByCid('c0').attributes);//Object { id=1, name="Musikar", age=22 }
console.log(hackers.getByCid(hacker1).attributes);//Object { id=1, name="Musikar", age=22 }
*/

/* at  collection.at(index) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

console.log(hackers.at(0).attributes);//Object { id=1, name="PG", age=21 }
console.log(hackers.at(100));//undefined
*/


/* push  collection.push(model, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.push({
	id:3,
	name:'黑客',
	age:110
});

console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=3, name="黑客", age=110 }
*/


/* pop  collection.pop([options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.pop();
console.log(hackers.at(hackers.models.length-1).attributes);//Object { id=1, name="PG", age=21 }
*/


/* unshift  collection.unshift(model, [options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.unshift({
	id:0,
	name:'黑客',
	age:119
});

console.log(hackers.at(0).attributes);//Object { id=0, name="黑客", age=119 }
*/


/* shift  collection.shift([options]) */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

hackers.shift();

console.log(hackers.at(0).attributes);//Object { id=2, name="Musikar", age=22 }
*/


/* length  collection.length */
/*
var Hacker = Backbone.Model.extend({});

var Hackers = Backbone.Collection.extend({
	model:Hacker
});

var hackers = new Hackers([{
	id:1,
	name:'PG',
	age:21
},{
	id:2,
	name:'Musikar',
	age:22
}]);

console.log(hackers.length);//2
*/


/* comparator  collection.comparator */
/*代码1
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('age');
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('age'));//[18,20,21]
*/

/*代码2
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));//["PG","Hacker","Musikar"]
*/

/*代码3
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));

hackers.at(0).set('name','Penelope Garcia');//["PG", "Hacker", "Musikar"]
console.log(hackers.pluck('name'));//["Penelope Garcia", "Hacker", "Musikar"]

hackers.sort();
console.log(hackers.pluck('name'));//["Hacker", "Musikar", "Penelope Garcia"]
*/

/*代码4
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker1,hacker2){
		if(hacker1.get('name').length > hacker2.get('name').length){
			return 1;
		}else if(hacker1.get('name').length < hacker2.get('name').length){
			return -1;
		}else{
			return 0;
		}
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));//["PG","Hacker","Musikar"]

*/

/* sort  collection.sort([options]) */
/*
var Hacker = Backbone.Model;

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	comparator:function(hacker){
		return hacker.get('name').length;
	}
});

var hackers = new Hackers();
hackers.add({name:'PG',age:20});
hackers.add({name:'Musikar',age:18});
hackers.add({name:'Hacker',age:21});

console.log(hackers.pluck('name'));

hackers.at(0).set('name','Penelope Garcia');//["PG", "Hacker", "Musikar"]
console.log(hackers.pluck('name'));//["Penelope Garcia", "Hacker", "Musikar"]

hackers.on('reset',function(){
	console.log('reset...');
});

hackers.sort();
console.log(hackers.pluck('name'));//["Hacker", "Musikar", "Penelope Garcia"]
*/

/* pluck  collection.pluck(attribute) */
/*
var hackers = new Backbone.Collection([
	{name:'PG'},
	{name:'Hacker'},
	{name:'Musikar'}
]);

console.log(hackers.pluck('name'));//["PG", "Hacker", "Musikar"]
*/


/* where  collection.where(attributes) */
/*
var hackers = new Backbone.Collection([
	{name:'张三',age:21},
	{name:'李四',age:20},
	{name:'王五',age:22},
	{name:'赵六',age:20},
	{name:'马七',age:20}
]);

console.log(hackers.where({age:20}).length);//3
*/


/* url  collection.url or collection.url() */
/*
var Hacker = Backbone.Model.extend({
	//url:'test.php/'
});

var hacker = new Hacker({
	id:2,
	name:'Musikar',
	age:22
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	url:'ajax.php/'
});

var hackers = new Hackers(hacker);
hacker.fetch();//http://www.demo.com/ajax.php/2
*/


/* parse  collection.parse(response) */

/*
var Hacker = Backbone.Model.extend({
	
});

var hacker1 = new Hacker({
	id:0,
	name:'',
	age:0
});

var hacker2 = new Hacker({
	id:0,
	name:'',
	age:0
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	url:'ajax.php/',//[{"id":1,"name":"Musikar","age":22},{"id":2,"name":"PG","age":21}]
	parse:function(response){
		console.log(response);
	}
});

var hackers = new Hackers();
hackers.fetch({
	success:function(){
		//console.log(arguments);
		//console.log(hackers.toJSON());
	}
});
*/


/* fetch  collection.fetch([options]) */
/* reset  collection.reset(models, [options]) */
/*
var Hackers = Backbone.Collection.extend({
	url:'ajax.php'//[{"id":1,"name":"Musikar","age":22},{"id":2,"name":"PG","age":21}]
});

var hackers = new Hackers({
	id:0,
	name:'Hacker',
	age:20
});

hackers.on('reset',function(){
	//console.log('reset',arguments);
});

var xhr = hackers.fetch({
	data:{page:3},
	add:true,
	success:function(){
		//hackers.reset();
		console.log(hackers.toJSON());//[Object { id=1, name="Musikar", age=22}, Object { id=2, name="PG", age=21}]
	}
});

//console.log(xhr);
*/


/* create  collection.create(attributes, [options]) */

//====================================Backbone.Router==========================================




//====================================Backbone.sync==========================================

//console.log(Backbone.ajax);//undefined
//console.log(Backbone.sync);


/* emulateHTTP  Backbone.emulateHTTP = true */
/*
Backbone.emulateHTTP = true;

var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:1,
	name:'Musikar'
});

hacker.save();//X-HTTP-Method-Override	PUT
*/

/* emulateJSON  Backbone.emulateJSON = true*/
/*
Backbone.emulateJSON = true;

var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:1,
	name:'Musikar'
});

hacker.save();//model {"id":1,"name":"Musikar"}
*/


//====================================Backbone.View==========================================

//console.log(_.functions(new Backbone.View));//["$", "_configure", "_ensureElement", "bind", "delegateEvents", "initialize", "make", "off", "on", "remove", "render", "setElement", "trigger", "unbind", "undelegateEvents"]

/*
console.log(new Backbone.View({
	el:'body'
}));

console.log(new Backbone.View({
	tagName:'li'
}));

console.log(new Backbone.View({
	className:'demo'
}));

console.log(new Backbone.View({
	id:'demo'
}));

console.log(new Backbone.View({
	attributes:{
		style:'color:red;'
	}
}).$el.constructor === jQuery);//true


new Backbone.View({
	id:'demo',
	className:'demo',
	tagName:'span',
	attributes:{
		style:'color:red;',
		href:'http://www.w3hacker.com/'
	}
}).$el.text('demo').appendTo('body');
*/

/* make  view.make(tagName, [attributes], [content]) */
/*
var view = new Backbone.View();
var el = view.make('b',{'class':'demo'},'Bold!');
console.log(el.constructor);//HTMLElement {}
$('#demo').append(el);
*/

//=================================Utility================================

/* Backbone.noConflict */
/*
console.log(Backbone.noConflict());
console.log(Backbone);//undefined
*/

/* Backbone.$ */
/*
Backbone.$ = function(id){return document.getElementById(id);}

console.log(Backbone.$.toString());
/*
function (id) {
    return document.getElementById(id);
}
*/


/*Hello World
var Hacker = Backbone.Model.extend({
	name:'undefined'
});

var Hackers = Backbone.Collection.extend({
	model:Hacker,
	initialize:function(models,options){
		this.bind('add',options.view.addHacker);
	}
});

var HackerList = Backbone.View.extend({
	el:$(document),
	initialize:function(){
		this.hackers = new Hackers(null,{view:this});
	},
	events:{
		'keyup':'add'
	},
	add:function(evt){
		//delete
		if(evt.keyCode==8){
			$('#hackers li:last').remove();
			return;	
		}
		var hacker = new Hacker({name:String.fromCharCode(evt.keyCode)});
		this.hackers.add(hacker);
	},
	addHacker:function(model){
		$('#hackers').append('<li>'+model.get('name')+'</li>');
	}
});

new HackerList();

/*HTML代码

<div id="hack">Add One Hacker</div>
<ul id="hackers"></ul>

*/

/* initialize、defaults、set
var Hacker = Backbone.Model.extend({
	initialize:function(){
		console.log('initialize...');
	},
	defaults:{
		name:'Hacker',
		qq:'389443626'
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
console.log(hacker.toJSON());//Object { name="Musikar", qq="389443626" }
*/

/* Backbone.Model里的方法
var Hacker = Backbone.Model.extend({
	defaults:{
		name:'Hacker'
	},
	hack:function(website){
		console.log(this.get('name')+' is hacking '+website);
	}
});

var hacker =  new Hacker();
hacker.hack('www.w3hacker.com');//Hacker is hacking www.w3hacker.com
*/

/*监听属性的改变
var Hacker = Backbone.Model.extend({
	initialize:function(){
		this.bind('change:name',function(){
			console.log(arguments);
		});	
	},
	defaults:{
		name:'Hacker'
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
*/


/*属性验证
var Hacker = Backbone.Model.extend({
	initialize:function(){
		this.bind('error',function(model,errorMsg){
			document.title = errorMsg;
		});
	},
	validate:function(attrs){
		if(attrs.name==''){
			return 'name不能为空';
		}else{
			document.title = 'name设置正确';
		}
	}
});

var hacker = new Hacker();
hacker.set({
	name:'Musikar'
});
*/

/*对象的获取和保存*/
/*
var Hacker = Backbone.Model.extend({
	url:'ajax.php/'
});

var hacker = new Hacker({
	name:'Musikar',
	qq:'389443626'
});

hacker.save();//POST {"name":"Musikar","qq":"389443626"}
*/

/*
var hacker = new Hacker({
	id:1,
	name:'Musikar',
	qq:'389443626'
});

hacker.save();//PUT {"id":1,"name":"Musikar","qq":"389443626"}
*/

/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'PG',
	age:21,
	gender:1
});

hacker.save();
*/

/* fetch
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'',
	age:'',
	gender:''
});

hacker.fetch({
	success:function(model,json){
		console.log(hacker.toJSON());//Object { id="2", name="PG", age="21", gender="1" }
	}
});

*/

/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php'
});

var hacker = new Hacker({
	id:2,
	name:'',
	age:'',
	gender:''
});

hacker.fetch({
	url:'test.php'
});
*/

//===============================Backbone.Collection=====================================
/*
var Hacker = Backbone.Model.extend({
	urlRoot:'ajax.php',
	defaults:{
		
	}
});

var Hackers = Backbone.Collection.extend({
	url:'ajax.php',
	model:Hacker
});

var h1 = new Hacker({title:'Musikar'});
var h2 = new Hacker({title:'PG'});
var h3 = new Hacker({title:'黑客'});

var hackers = new Hackers();
//添加
hackers.add([h1,h2,h3]);
console.log(hackers.toJSON());//[Object { title="Musikar"}, Object { title="PG"}, Object { title="黑客"}]
//删除
hackers.remove(h1);
console.log(hackers.toJSON());//[Object { title="PG"}, Object { title="黑客"}]
//遍历
hackers.each(function(model){
	console.log(model.toJSON());
});

hackers.bind('reset',function(){
	hackers.each(function(hacker){
		$('#hackers').append('<li>'+hacker.get('name')+'</li>');
	});
});

hackers.fetch();
*/

//================================Backbone.Router========================================
/* Hello World
var Router = Backbone.Router.extend({
	routes:{
		'*actions':'defaultRoute'
	},
	defaultRoute:function(){
		console.log(arguments);
	}
});

var router = new Router();
Backbone.history.start();
*/

//传递参数
/*
var Router = Backbone.Router.extend({
	routes:{
		"get/:id":"defaultRoute"
	},
	defaultRoute:function(){
		console.log(arguments);//["1"]
	}
});

var router = new Router();
Backbone.history.start();
*/

/*
var Router = Backbone.Router.extend({
	routes:{
		":id/:name":"defaultRoute"
	},
	defaultRoute:function(){
		console.log(arguments);//["1", "Musikar"]
		//http://www.demo.com/#1/Musikar
	}
});

var router = new Router();
Backbone.history.start();
*/

//================================Backbone.View=====================================
/* What's this?? underscore 
console.log(_.template($('#template').text())({label:'Hello World'}));

<script type="text/template" id="template">
	<label for=""><%=label%></label>
	<input type="text" name="input" id="input" />	
	<input type="button" value="Search" id="search" />
</script>
*/

/* 创建一个view
var View = Backbone.View.extend({
	initialize:function(){
		console.log(arguments);
	}
});

var view = new View();
console.log(_.functions(view));//["$", "_configure", "_ensureElement", "bind", "constructor", "delegateEvents", "initialize", "make", "off", "on", "remove", "render", "setElement", "trigger", "unbind", "undelegateEvents"]
*/

/*
var View = Backbone.View.extend({
	el:$('#search'),
	initialize:function(){
		this.render({
			label:'标签:'
		});
	},
	render:function(obj){
		var t = _.template($('#template').text(),obj);
		$(this.el).html(t);
	},
	events:{
		'click #search':'search'
	},
	search:function(){
		alert($('#input').val());
	}
});

var view = new View();
*/

额… 楼主你的笔记一般人很难看懂啊… 条理性有点…那啥

果然是笔记,不过这里是论坛啊。

看来值得动用 admin 账户… 不过那个账户在哪?

天书啊,你该总结点精华出来的.

回到顶部