最近在学习backbone 这是我的学习笔记
发布于 2年前 作者 w3hacker 1068 次浏览

//代码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>');

});

<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('

  • ‘+model.get(‘name’)+’
  • '); } });

    new HackerList();

    /*HTML代码

    Add One Hacker

      */

      /* 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('

    • ‘+hacker.get(‘name’)+’
    • '); }); });

      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:'[email protected]',
              tel:'18686128512'
          }
      });
      
      hacker.attributes.contacts.email = '[email protected]';
      
      console.log(hacker.clone().attributes.contacts.email);//[email protected]
      */
      
      /* 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 账户… 不过那个账户在哪?

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

      回到顶部