分类目录归档：backbone

backbone.js（六）后台交互

2014年8月3日 chen

backbone与后台交互，使用RESTFUL风格，

后台使用tinkphp进行接收请求。

一、添加

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 后台url
    url: '/backbone/Home/Note.json',

    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});

在Model中，定义url属性，是其可以后台进行交互

// 创建模块
var note = new Note( {title: '学习backbone'} );
// 发送请求
note.save();


# php

/**
     * @desc 插入数据
     */
    public function insert_post_json() {
        $data = json_decode( $GLOBALS["HTTP_RAW_POST_DATA"], true );

        $data['id'] = D( 'Note' ) -> add( $data );

        $this -> response( $data, 'json' );
    }

/**

* 模型

var Note = Backbone.Model.extend({

// 后台url

url: '/backbone/Home/Note.json',

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

在Model中，定义url属性，是其可以后台进行交互

// 创建模块

var note = new Note( {title: '学习backbone'} );

// 发送请求

note.save();

# php

/**

* @desc 插入数据

public function insert_post_json() {

$data = json_decode( $GLOBALS["HTTP_RAW_POST_DATA"], true );

$data['id'] = D( 'Note' ) -> add( $data );

$this -> response( $data, 'json' );

}

二、查找

/**
 * Collection 集合
 */

var NoteCollection = Backbone.Collection.extend({
    // model 类型
    model: Note,
    // 获取后台数据连接
    url: '/backbone/Home/Note.json',
    // 初始化
    initialize: function() {
        // 监听事件
        this.on( {
            // 添加事件
            add: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型添加了到集合里' );
            },
            // 移除事件
            remove: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型从集合里移除了' );
            },
            // 属性变化事件
            change: function( model, options ) {
                console.log( '集合里的模型发生了变化' );
            }
        } );
    }
});

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes(/page/:page)': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function( page ) {
        // 设置分页
        var page = page || 1;

        /**
         * 在Collection中定义url属性
         * 触发index规则后
         * 创建collection，并通过fetch方法从后台获取数据
         */
        var noteCollection = new NoteCollection();
        noteCollection.url = noteCollection.url + '?' + jQuery.param( { p: page } );
        var noteCollectionView = new NoteCollectionView( {collection: noteCollection} );
        noteCollection.fetch();

        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* Collection 集合

var NoteCollection = Backbone.Collection.extend({

// model 类型

model: Note,

// 获取后台数据连接

url: '/backbone/Home/Note.json',

// 初始化

initialize: function() {

// 监听事件

this.on( {

// 添加事件

add: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型添加了到集合里' );

// 移除事件

remove: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型从集合里移除了' );

// 属性变化事件

change: function( model, options ) {

console.log( '集合里的模型发生了变化' );

}

} );

}

});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes(/page/:page)': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function( page ) {

// 设置分页

var page = page || 1;

/**

* 在Collection中定义url属性

* 触发index规则后

* 创建collection，并通过fetch方法从后台获取数据

var noteCollection = new NoteCollection();

noteCollection.url = noteCollection.url + '?' + jQuery.param( { p: page } );

var noteCollectionView = new NoteCollectionView( {collection: noteCollection} );

noteCollection.fetch();

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

三、获取单条记录并修改

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // url: '/backbone/Home/Note',
    // 必须设置urlRoot，不然无法获取单挑数据
    urlRoot: '/backbone/Home/Note',
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});

/**
 * 修改
 */
// 获取id为1的数据
var note = new Note( {id: 1} );
note.fetch();
// 设置属性
note.set( 'title', '学习backbone，并写博客记录学习内容' );
// 发送请求保存
note.save();

/**

* 模型

var Note = Backbone.Model.extend({

// url: '/backbone/Home/Note',

// 必须设置urlRoot，不然无法获取单挑数据

urlRoot: '/backbone/Home/Note',

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* 修改

// 获取id为1的数据

var note = new Note( {id: 1} );

note.fetch();

// 设置属性

note.set( 'title', '学习backbone，并写博客记录学习内容' );

// 发送请求保存

note.save();

四、删除

/**
 * 删除
 */

var note = new Note( {id: 1} );
note.destroy();

/**

* 删除

var note = new Note( {id: 1} );

note.destroy();

五、路由设置

'URL_ROUTER_ON' => true, // 是否开启URL路由
'URL_ROUTE_RULES' => array(
        array( 'Note/:id', 'Note/read', '', array( 'method' => 'GET' ) ),
        array( 'Note', 'Note/list', '', array( 'method' => 'GET' ) ),
        array( 'Note', 'Note/insert', '', array( 'method' => 'POST' ) ),
        array( 'Note/:id', 'Note/update', '', array( 'method' => 'PUT' ) ),
        array( 'Note/:id', 'Note/delete', '', array( 'method' => 'DELETE' ) ),
    ),

'URL_ROUTER_ON' => true, // 是否开启URL路由

'URL_ROUTE_RULES' => array(

array( 'Note/:id', 'Note/read', '', array( 'method' => 'GET' ) ),

array( 'Note', 'Note/list', '', array( 'method' => 'GET' ) ),

array( 'Note', 'Note/insert', '', array( 'method' => 'POST' ) ),

array( 'Note/:id', 'Note/update', '', array( 'method' => 'PUT' ) ),

array( 'Note/:id', 'Note/delete', '', array( 'method' => 'DELETE' ) ),

backbone

backbone.js（五）Router

2014年8月3日 chen

一、基本用法

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        notes: 'index',
    },
    // 具体实现操作
    index: function() {
        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    }
});


// 路由
var noteRouter = new NoteRouter();
// 开始监视hashchange事件
Backbone.history.start();

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

notes: 'index',

// 具体实现操作

index: function() {

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

}

});

// 路由

var noteRouter = new NoteRouter();

// 开始监视hashchange事件

Backbone.history.start();

假设域名为www.notes.com，当域名变化为www.notes.com/#notes时，就会触发notes指向的index操作。如下图，

域名后缀不是#notes时，没有触发index的操作，没有将数据放入页面。

域名后缀为#notes时，触发index操作，将数据放入页面

二、路由传参数

其实是需要定义相应的路由规则就可以进行传参

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function() {
        jQuery( '#note_list' ).html( noteCollectionView.el );
        console.log( '笔记列表' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function() {

jQuery( '#note_list' ).html( noteCollectionView.el );

console.log( '笔记列表' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

三、可选参数（分页）

/**
 * 路由器  Router
 */
var NoteRouter = Backbone.Router.extend({
    // 定义路由规则
    routes: {
        'notes(/page/:page)': 'index',
        'notes/:id': 'show'
    },
    // 具体实现操作
    index: function( page ) {
        // 分页
        var page = page || 1,
            low = ( page - 1 ) * 3,
            high = page * 3,
            // 获取相关数据
            pageNoteCollection = new NoteCollection( noteCollection.slice( low, high ) ),
            pageNoteCollectionView = new NoteCollectionView({collection: pageNoteCollection});

        jQuery( '#note_list' ).html( pageNoteCollectionView.el );
        console.log( '笔记列表,第' + page + '页' );
    },
    // 实现带有参数的方法
    show: function( id ) {
        var note = noteCollection.get( id ),
            noteView = new NoteView( {model: note} );

        jQuery( '#note_list' ).html( noteView.render().el );
        console.log( '笔记: ' + id );
    }
});

/**

* 路由器 Router

var NoteRouter = Backbone.Router.extend({

// 定义路由规则

routes: {

'notes(/page/:page)': 'index',

'notes/:id': 'show'

// 具体实现操作

index: function( page ) {

// 分页

var page = page || 1,

low = ( page - 1 ) * 3,

high = page * 3,

// 获取相关数据

pageNoteCollection = new NoteCollection( noteCollection.slice( low, high ) ),

pageNoteCollectionView = new NoteCollectionView({collection: pageNoteCollection});

jQuery( '#note_list' ).html( pageNoteCollectionView.el );

console.log( '笔记列表,第' + page + '页' );

// 实现带有参数的方法

show: function( id ) {

var note = noteCollection.get( id ),

noteView = new NoteView( {model: note} );

jQuery( '#note_list' ).html( noteView.render().el );

console.log( '笔记: ' + id );

}

});

backbone

backbone.js（四）Collection

2014年8月3日 chen

Collection是一些model的集合。

一、模型集合

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});


/**
 * Collection 集合
 */

var NoteCollection = Backbone.Collection.extend({
    model: Note
});

// 模型
var note1 = new Note({
    id: 1,
    title: '学习backbone'
});

var note2 = new Note({
    id: 2,
    title: '学习angular'
});

var note3 = new Note({
    id: 3,
    title: '学习golang'
});

// 集合
var noteCollection = new NoteCollection([note1, note2]);
console.log( noteCollection );    // child {length: 2, models: Array[2], _byId: Object, constructor: function, model: function…}


// 添加模型
noteCollection.add( note1 );
// 或者添加多个
noteCollection.add( [note1, note2] );

// 这样是不会覆盖id为1的模型
noteCollection.add( {id: 1, title: 'Hello'} );
// 设置merge: true ，就会对id为1的模型进行覆盖
noteCollection.add( {id: 1, title: 'Hello'}, {merge: true} );

// 删除模型
noteCollection.remove( note1 );
// 清空集合, 并重新赋值
noteCollection.reset( [note1, note2] );

// 弹出最后一个模型
noteCollection.pop();
// 弹出第一个模型
noteCollection.shift();

// 添加模型到最后
noteCollection.push( note1 );
// 添加模型到第一个位置
noteCollection.unshift( note1 );
// 添加模型到某个位置
noteCollection.add( note1, {at: 1} );


// set 方法
// 如果原集合里存在note2，note3。则会修改原属性
// 如果不存在note3，note3.则会新增
// 并且删除除了note3，note3以为的模型
noteCollection.set( [note2, note3] );
// 不删除 除了note3，note3以为的模型
noteCollection.set( [note2, note3], {remove: false} );
// 还有 {add: false}， {merge: false} 参数可以设置

// 获取模型
console.log( noteCollection.get( 2 ) );         // 通过id获取
console.log( noteCollection.get( note2 ) );     // 通过模型获取
console.log( noteCollection.at( 1 ) );          // 通过下标序号获取

100

101

102

103

104

105

106

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* Collection 集合

var NoteCollection = Backbone.Collection.extend({

model: Note

});

// 模型

var note1 = new Note({

id: 1,

title: '学习backbone'

});

var note2 = new Note({

id: 2,

title: '学习angular'

});

var note3 = new Note({

id: 3,

title: '学习golang'

});

// 集合

var noteCollection = new NoteCollection([note1, note2]);

console.log( noteCollection ); // child {length: 2, models: Array[2], _byId: Object, constructor: function, model: function…}

// 添加模型

noteCollection.add( note1 );

// 或者添加多个

noteCollection.add( [note1, note2] );

// 这样是不会覆盖id为1的模型

noteCollection.add( {id: 1, title: 'Hello'} );

// 设置merge: true ，就会对id为1的模型进行覆盖

noteCollection.add( {id: 1, title: 'Hello'}, {merge: true} );

// 删除模型

noteCollection.remove( note1 );

// 清空集合, 并重新赋值

noteCollection.reset( [note1, note2] );

// 弹出最后一个模型

noteCollection.pop();

// 弹出第一个模型

noteCollection.shift();

// 添加模型到最后

noteCollection.push( note1 );

// 添加模型到第一个位置

noteCollection.unshift( note1 );

// 添加模型到某个位置

noteCollection.add( note1, {at: 1} );

// set 方法

// 如果原集合里存在note2，note3。则会修改原属性

// 如果不存在note3，note3.则会新增

// 并且删除除了note3，note3以为的模型

noteCollection.set( [note2, note3] );

// 不删除除了note3，note3以为的模型

noteCollection.set( [note2, note3], {remove: false} );

// 还有 {add: false}， {merge: false} 参数可以设置

// 获取模型

console.log( noteCollection.get( 2 ) ); // 通过id获取

console.log( noteCollection.get( note2 ) ); // 通过模型获取

console.log( noteCollection.at( 1 ) ); // 通过下标序号获取

二、事件

var NoteCollection = Backbone.Collection.extend({
    // model 类型
    model: Note,
    // 初始化
    initialize: function() {
        // 监听事件
        this.on( {
            // 添加事件
            add: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型添加了到集合里' );
            },
            // 移除事件
            remove: function( model, collection, options ) {
                console.log( 'ID: ' + model.id + '模型从集合里移除了' );
            },
            // 属性变化事件
            change: function( model, options ) {
                console.log( '集合里的模型发生了变化' );
            }
        } );
    }
});

var NoteCollection = Backbone.Collection.extend({

// model 类型

model: Note,

// 初始化

initialize: function() {

// 监听事件

this.on( {

// 添加事件

add: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型添加了到集合里' );

// 移除事件

remove: function( model, collection, options ) {

console.log( 'ID: ' + model.id + '模型从集合里移除了' );

// 属性变化事件

change: function( model, options ) {

console.log( '集合里的模型发生了变化' );

}

} );

}

});

三、集合视图

# html
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Backbone</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
</head>
<body>
    <div class="container">
        <h1 class="page-header">Collection View</h1>
        <div id="note_list"></div>
    </div>

    <script type="text/template" id="list-template" >
        <span><%= title %></span><small class="pull-right"><%= create_at %></small>
    </script>


    <script src="__PUBLIC__/js/lib/jquery-1.11.1.js"></script>
    <script src="__PUBLIC__/js/lib/underscore.js"></script>
    <script src="__PUBLIC__/js/lib/backbone.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
    <script src="__PUBLIC__/js/app.js"></script>
</body>
</html>


# js
/**
 * Collection View 集合视图
 */

var NoteCollectionView = Backbone.View.extend({
    tagName: 'ul',

    // 初始化
    initialize: function() {
        this.collection.on( 'add', this.addOne, this );
        this.render();
    },

    // 绘制
    render: function() {
        // 循环 underscore 方法
        this.collection.each(this.addOne, this);
        return this;
    },
 
    // 自定义方法
    addOne: function(note) {
        // 创建视图
        var noteView = new NoteView({model: note});
        this.$el.append( noteView.render().el );
    }

});



// 模型
var note1 = new Note({
    id: 1,
    title: '学习backbone'
});

var note2 = new Note({
    id: 2,
    title: '学习angular'
});

var note3 = new Note({
    id: 3,
    title: '学习golang'
});

// 集合
var noteCollection = new NoteCollection([note1, note2, note3]);
// 集合视图
var noteCollectionView = new NoteCollectionView({collection: noteCollection});
// 将绘制后的html插入页面
$( '#note_list' ).html( noteCollectionView.el );

# html

<!DOCTYPE html>

<head>

<title>Backbone</title>

</head>

<body>

<h1 class="page-header">Collection View</h1>

</div>

</script>

</body>

</html>

# js

/**

* Collection View 集合视图

var NoteCollectionView = Backbone.View.extend({

tagName: 'ul',

// 初始化

initialize: function() {

this.collection.on( 'add', this.addOne, this );

this.render();

// 绘制

render: function() {

// 循环 underscore 方法

this.collection.each(this.addOne, this);

return this;

// 自定义方法

addOne: function(note) {

// 创建视图

var noteView = new NoteView({model: note});

this.$el.append( noteView.render().el );

}

});

// 模型

var note1 = new Note({

id: 1,

title: '学习backbone'

});

var note2 = new Note({

id: 2,

title: '学习angular'

});

var note3 = new Note({

id: 3,

title: '学习golang'

});

// 集合

var noteCollection = new NoteCollection([note1, note2, note3]);

// 集合视图

var noteCollectionView = new NoteCollectionView({collection: noteCollection});

// 将绘制后的html插入页面

$( '#note_list' ).html( noteCollectionView.el );

随后，紧跟着多创建一个model，并加入collection，html页面马上随之变化。

var note4 = new Note({
    id: 4,
    title: '深入精通php'
});

noteCollection.add( note4 );

var note4 = new Note({

id: 4,

title: '深入精通php'

});

noteCollection.add( note4 );

backbone

backbone.js（三）View

2014年8月2日 chen

一、基本方法

/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    }
});


var noteView = new NoteView();
console.log( noteView.el );         // <li data-role="list" class="item"></li>

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

}

});

var noteView = new NoteView();

console.log( noteView.el ); // <li data-role="list" class="item"></li>

二、视图绑定模型

/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    },
    // 绘制
    render: function() {
        this.$el.html( this.model.get( 'title' ) );
    }
});

// 模型
var note = new Note({
    title: '学习backbone'
});

// 视图
var noteView = new NoteView({model: note});     // 视图绑定模型
console.log( noteView.el );         // <li data-role="list" class="item">学习backbone</li>

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

// 绘制

render: function() {

this.$el.html( this.model.get( 'title' ) );

}

});

// 模型

var note = new Note({

title: '学习backbone'

});

// 视图

var noteView = new NoteView({model: note}); // 视图绑定模型

console.log( noteView.el ); // <li data-role="list" class="item">学习backbone</li>

三、模板

# html
<!DOCTYPE html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <title>Backbone</title>
    <link rel="stylesheet" href="__PUBLIC__/bootstrap/css/bootstrap.css">
</head>
<body>
    <script type="text/template" id="list-template" >
        <span><%= title %></span><small class="pull-right"><%= create_at %></small>
    </script>


    <script src="__PUBLIC__/js/lib/jquery-1.11.1.js"></script>
    <script src="__PUBLIC__/js/lib/underscore.js"></script>
    <script src="__PUBLIC__/js/lib/backbone.js"></script>
    <script src="__PUBLIC__/bootstrap/js/bootstrap.js"></script>
    <script src="__PUBLIC__/js/app.js"></script>
</body>
</html>


# js
/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 监听验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});


/**
 * View 试图
 */

var NoteView = Backbone.View.extend({
    // 标签名
    tagName : 'li',
    // 类
    className: 'item',
    // 属性
    attributes: {
        'data-role': 'list'
    },
    // 绘制
    render: function() {
        this.$el.html( this.template( this.model.attributes ) );
    },
    // 模板
    template: _.template( jQuery( '#list-template' ).html() )
});

// 模型
var note = new Note({
    title: '学习backbone'
});

// 视图
var noteView = new NoteView({model: note});     // 视图绑定模型
noteView.render();
console.log( noteView.el );         
// <li data-role="list" class="item">
//     <span>学习backbone</span>
//     <small>Sat Aug 02 2014 17:29:58 GMT+8000(中国标准时间)</small>
// </li>

# html

<!DOCTYPE html>

<head>

<title>Backbone</title>

</head>

<body>

</script>

</body>

</html>

# js

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 监听验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

/**

* View 试图

var NoteView = Backbone.View.extend({

// 标签名

tagName : 'li',

// 类

className: 'item',

// 属性

attributes: {

'data-role': 'list'

// 绘制

render: function() {

this.$el.html( this.template( this.model.attributes ) );

// 模板

template: _.template( jQuery( '#list-template' ).html() )

});

// 模型

var note = new Note({

title: '学习backbone'

});

// 视图

var noteView = new NoteView({model: note}); // 视图绑定模型

noteView.render();

console.log( noteView.el );

// <li data-role="list" class="item">

// <span>学习backbone</span>

// <small>Sat Aug 02 2014 17:29:58 GMT+8000(中国标准时间)</small>

// </li>

backbone

backbone.js（二）Model

2014年8月2日 chen

一、基本方法

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
    }
});

// 创建note1实例
var note1 = new Note( { 
    title: 'Hello',
    author: 'cc'
} );

// 获取属性
console.log( note1.get( 'title' ) );    // Hello
console.log( note1.get( 'notitle' ) );  // undefined 

// 获取所有属性
console.log( note1.toJSON() );          // Object {title: "Hello", author: "cc"} 
console.log( note1.attributes );        // Object {title: "Hello", author: "cc"} 

// 是否存在某个key值
console.log( note1.has( 'title' ) );    // true
console.log( note1.has( 'notitle' ) );  // false 

// 删除属性
note1.unset( 'title' );

// 设置属性
note1.set( 'hello', 'world' );
note1.set( {
    content: 'nihao, 第一个笔记',
    title: 'Hello'
} );

console.log( note1.toJSON() );          // Object {author: "cc", hello: "world", content: "nihao, 第一个笔记", title: "Hello"} 

// 清空所有属性
note1.clear();

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

}

});

// 创建note1实例

var note1 = new Note( {

title: 'Hello',

author: 'cc'

} );

// 获取属性

console.log( note1.get( 'title' ) ); // Hello

console.log( note1.get( 'notitle' ) ); // undefined

// 获取所有属性

console.log( note1.toJSON() ); // Object {title: "Hello", author: "cc"}

console.log( note1.attributes ); // Object {title: "Hello", author: "cc"}

// 是否存在某个key值

console.log( note1.has( 'title' ) ); // true

console.log( note1.has( 'notitle' ) ); // false

// 删除属性

note1.unset( 'title' );

// 设置属性

note1.set( 'hello', 'world' );

note1.set( {

content: 'nihao, 第一个笔记',

title: 'Hello'

} );

console.log( note1.toJSON() ); // Object {author: "cc", hello: "world", content: "nihao, 第一个笔记", title: "Hello"}

// 清空所有属性

note1.clear();

二、事件

当使用set方法改变属性时，就会触发change时间。

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );

        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );
    }
});

var note2 = new Note();
note2.set( 'title', '你好' );
// title 属性值变为：你好
// note 属性发生变化

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

}

});

var note2 = new Note();

note2.set( 'title', '你好' );

// title 属性值变为：你好

// note 属性发生变化

三、验证（validate）

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});



var note2 = new Note();
console.log( note2.set( 'title', '你好', {validate: true} ) );    // false
console.log( note2.validationError );                             // 笔记标题需要大于3个字符串 
console.log( note2.get( 'title' ) );                              // one note

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

var note2 = new Note();

console.log( note2.set( 'title', '你好', {validate: true} ) ); // false

console.log( note2.validationError ); // 笔记标题需要大于3个字符串

console.log( note2.get( 'title' ) ); // one note

四、验证事件（invalid）

/**
 * 模型
 */
var Note = Backbone.Model.extend({
    // 定义默认属性
    defaults: {
        title: 'one note',
        create_at: new Date()
    },
    // 初始化，执行方法
    initialize: function() {
        console.log( '新创建了一条笔记：' + this.get( 'title' ) );
        // 监听所有属性发生变化
        this.on( 'change', function( model, options ) {
            console.log( 'note 属性发生变化' );
        } );
        // 监听title属性发生变化
        this.on( 'change:title', function( model, options ) {
            console.log( 'title 属性值变为：' + options );
        } );

        // 验证事件
        this.on( 'invalid', function( model, error ) {
            console.log( model );
            console.log( error );
        } );
    },
    // 验证
    validate: function( attr, options ) {
        if( attr.title.length < 3 ) {
            return  '笔记标题需要大于3个字符串';
        }
    }
});



var note2 = new Note();
note2.set( 'title', '你好', {validate: true} )
// child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}
// 笔记标题需要大于3个字符串

/**

* 模型

var Note = Backbone.Model.extend({

// 定义默认属性

defaults: {

title: 'one note',

create_at: new Date()

// 初始化，执行方法

initialize: function() {

console.log( '新创建了一条笔记：' + this.get( 'title' ) );

// 监听所有属性发生变化

this.on( 'change', function( model, options ) {

console.log( 'note 属性发生变化' );

} );

// 监听title属性发生变化

this.on( 'change:title', function( model, options ) {

console.log( 'title 属性值变为：' + options );

} );

// 验证事件

this.on( 'invalid', function( model, error ) {

console.log( model );

console.log( error );

} );

// 验证

validate: function( attr, options ) {

if( attr.title.length < 3 ) {

return '笔记标题需要大于3个字符串';

}

});

var note2 = new Note();

note2.set( 'title', '你好', {validate: true} )

// child {cid: "c1", attributes: Object, _changing: false, _previousAttributes: Object, changed: Object…}

// 笔记标题需要大于3个字符串

参考链接：

官方手册

http://blog.csdn.net/the_fire/article/details/7445448

backbone

backbone.js（一）初识

2014年8月2日 chen

backbone.js提供了一套web开发的框架，通过Models进行key-value绑定及custom事件处理,通过Collections提供一套丰富的API用于枚举功能,通过Views来进行事件处理及与现有的Application通过RESTful JSON接口进行交互.它是基于jquery和underscore的一个js框架。

整体上来说，backbone.js是一个web端javascript的mvc框架，算得上是重量级的框架。它能让你像写java代码一些写js代码，定义类，类的属性以及方法。更重要的是它能够优雅的把原本无逻辑的javascript代码进行组织，并且提供数据和逻辑相互分离的方法，减少代码开发过程中的数据和逻辑混乱。

通过backbone，你可以把你的数据当作Models，通过Models你可以创建数据，进行数据验证，销毁或者保存到服务器上。当界面上的操作引起model中属性的变化时，model会触发change的事件;那些用来显示model状态的views会接受到model触发change的消息，进而发出对应的响应，并且重新渲染新的数据到界面。在一个完整的backbone应用中，你不需要写那些胶水代码来从DOM中通过特殊的id来获取节点，或者手工的更新HTML页面，因为在model发生变化时，views会很简单的进行自我更新。

Backbone 的优点和一些经验 Tip：

View 的划分将页面上的视图元素解耦，粒度细化。View 间通过事件和 Model 通讯，避免了 DOM 事件的滥用。
Model 和 Restful 的通讯方式对于后端人员非常友好。
MVC 架构清晰，我有个常年写 Java 没写过 JS 的同事看 Backbone 很快就了解了整体设计，虽然这时候他还是不会写 JS。
Collection/Model 抽象了以前杂乱的 AJAX 请求，CRUD 请求变得非常非常方便。
强烈建议 View -> Model 单向依赖，世界会美好很多。
配上一个模块化加载器例如 SeaJS 会很爽。

Backbone 的一些缺点，或者说一些尚未实现的 Feature：

Model 层比较简单，如果要支持 One-To-One 或者 One-To-Many 等复杂数据关系时有些力不从心。还有一个 Model 只能属于一个 Collection 这个设计，页面复杂的时候会很受局限。例如这个问题： http://www.zhihu.com/question/19843899 （补充：Backbone.Relations 插件是这个问题的一个解决方案 https://github.com/PaulUithol/Backbone-relational By zjhiphop）
同上，Model 只有基本的 CRUD 操作，不能很好的扩展，Backbone.sync 方法写的不太灵活，要想扩展就得重写 sync 方法。
View 层没有很强的 Page 管理机制，比如通过 URL 切换改变整个页面时，页面上尚存的 View 如何处理？直接销毁的话，是否要销毁关联的 Model、Collection？Cache 住？如何管理 Cache？
内存管理需要比较小心，缺乏机制避免创建重复 Model。
extends override 父类方法的时候得写一串的 SuperClass.prototype.someMethod.apply 什么的，就不能实现个 _super 方法么……
对调试非常不友好。
作者有代码洁癖（也是加分项），this.$el 大家呼唤了这么久才加上，估计今生也看不到 this._super。
更新慢。

参考链接：

知乎-Backbone.js 的最佳应用场景有哪些？

初识backbone.js

官方手册

老陈是一个普通的文艺二逼青年

分类目录归档：backbone

backbone.js（六）后台交互

一、添加

二、查找

三、获取单条记录并修改

四、删除

五、路由设置

backbone.js（五）Router

一、基本用法

二、路由传参数

三、可选参数（分页）

backbone.js（四）Collection

一、模型集合

二、事件

三、集合视图

backbone.js（三）View

一、基本方法

二、视图绑定模型

三、模板

backbone.js（二）Model

一、基本方法

二、事件

三、验证（validate）

四、验证事件（invalid）

backbone.js（一）初识

For The Dream