<script src="http://cdnjs.cloudflare.com/ajax/libs/gillie/0.2.1/gillie.min.js"></script>

译者：这个库提供了Mvvm框架下的基本功能，同时因其体积和灵活性，可以很好的适配到手机端

var MainHandler = Gillie.Handler.extend({    initialize: function() {        alert( ‘Hello world!‘ );    }});//创建handler实例var mainHandler = new MainHandler();

var AppHandler = Gillie.Handler.extend({        events: {            ‘click a‘: ‘turnRed‘        }    ,   turnRed: function( e ) {            e.preventDefault();            var target = e.currentTarget;            $( target ).css( ‘color‘, ‘red‘ );        }});// 创建处理器实例var appHandler = new AppHandler();

var TodoModel = Gillie.Model.extend({        url: ‘http://localhost/api/‘    ,   create: function( event ) {            this.Post( ‘todo/‘, event );        }});// 创建模型实例var todoModel = new TodoModel();

var TodoView = Gillie.View.extend({        initialize: function() {            // 绑定’todo.create’事件            todoModel.on( ‘todo.create‘, this.onCreate );        }    ,   onCreate: function( instance, response ) {            alert( instance.get( ‘title‘ ) + ‘. Has been saved‘ );        }});// 创建视图实例var todoView = new TodoView();

var TodoHandler = Gillie.Handler.extend({        events: {            ‘keypress #new-todo‘: ‘createOnEnter‘        }    ,   createOnEnter: function( e ) {            var enterKey = 13            ,   currentTarget = e.currentTarget;            if ( e.which != enterKey ) return;            var title = $( target ).val();            todoModel.set( ‘title‘, title )                .create( ‘todo.create‘ );        }});// 创建处理器实例var todoHandler = new TodoHandler();

<script src="http://www.mamicode.com/js/jquery.js"></script><script src="http://www.mamicode.com/js/gillie.js"></script><script src="http://www.mamicode.com/js/yourapp.js"></script>

<script src="http://www.mamicode.com/js/models/post.js"></script><!-- 视图会需要访问模型，并且监听它的事件 --><script src="http://www.mamicode.com/js/views/post.js"></script><!— 模型定义在先，从而处理器可以创建模型 --><script src="http://www.mamicode.com/js/handler/post.js"></script>

<!— 处理器定义无法访问post模型 --><script src="http://www.mamicode.com/js/handler/post.js"></script><!— 由于未定义模型，使得视图无法监听post模型--><script src="http://www.mamicode.com/js/views/post.js"></script><!— 虽然在视图及处理器之后加入模型，但前者已经无法访问模型了--><script src="http://www.mamicode.com/js/models/post.js"></script>

//初始化API：初始化处理器，在模型和视图中有类似的方法，每次实例创建时均被调用//使用方法：var Posts = Gillie.Handler.extend({    initialize: function() {        // 从所有的posts中获取信息并触发’posts.get’事件    // 监听者获知事件，从而重新渲染        model.sync( ‘posts.get‘ );    }});// Posts 实例var posts = new Post();

//el属性值为定义事件的容器，当指定该值到.post-box时，所有在事件属性中定义的事件，都将仅绑定到.post-box的内部元素//如果el没有指定，事件将绑定到document上//使用方法var Posts = Gillie.Handler.extend({        // 绑定容器        el: ‘.posts-container‘    ,   events: {            ‘click .post-title‘: ‘showPost‘        }        // Show post 方法    ,   showPost: function( e ) {            e.preventDefault();            //做点什么吧...        }});// 创建实例，启动监听var posts = new Posts();

//Events值为对象类型，用于绑定dom事件，并且将其部署到处理器回调方法中//在回调中，上下文环境为处理器自身。也就是说，处理器中定义的方法可以在处理器其他方法的事件回调中调用。//使用方法var Posts = Gillie.Handler.extend({        events: {                ‘click .post-title‘: ‘showPost‘            ,   ‘submit .update-post‘: ‘updatePost‘            ,   ‘keyup .posts-search-field‘: ‘findPosts‘        }    ,   showPost: function( e ) {            // 例如此处，可以调用该处理器的其他成员方法            var title = this.cleanTitle(                $( e.currentTarget ).data( ‘title‘ );            );            //做点什么吧...        }    ,   cleanTitle: function( title ) {            //做点什么吧...        }    ,   updatePost: function( e ) {            //做点什么吧...        }    ,   searchPosts: function( e ) {            //做点什么吧...        }});// 创建视图实例var posts = new Posts();

//该方法没有参数,也没有返回值，每次视图、模型和处理器被实例化时均会被调用//使用方法：var Person = Gillie.Model.extend({    //实例化时执行    initialize: function() {        console.log( ‘Person model has been instantiated‘ );    }});// 创建实例，将输出" Person model has been instantiated "var john = new Person();

//实例化时的初始默认属性。若在模型中设定则会覆盖默认值，也可以使用实例化后模型变量的get(),set()方法设置新值。//使用方法var Person = Gillie.Model.extend({    // 默认属性    defaults: {            ‘alias‘: ‘none‘        ,   ‘picture‘: ‘default.jpg‘    }});// 实例化Personvar john = new Person();// 默认情况下，John的picture属性对应default.jpgjohn.get( ‘picture‘ ); // default.jpg // 通过一下方式修改John的picture属性john.set( ‘picture‘, ‘john-pic.jpg‘ );

//该属性定义了所有请求方法的基础url 地址//使用方法：var Person = Gillie.Model.extend({        defaults: {            ‘picture‘: ‘default.jpg‘        }        // 请求的默认URL地址    ,   url: ‘http://localhost/api/v1/‘        // 存储    ,   save: function() {            this.Post( ‘person/‘, ‘person.create‘ );        }});var john = new Person({        ‘name‘: ‘John‘    ,   ‘picture‘: ‘john.jpg‘});// 模型存储将会发送POST请求到‘http://localhost/api/v1/person/‘john.save();

//Post model的post方法，参数为path,event,options//使用基础URL（base URL）组合path属性成一个完整URL，然后发送post请求。当请求完成后，触发带有这个key值的event事件。因此如果传递了resource.event作为event事件，将会由模型触发，同时监听者将获取到模型实例，并可将服务器响应的值作为参数传递过去。//使用方法：var Person = Gillie.Model.extend({    // 创建person    create: function( event ) {        this.Post( ‘person/‘, event, {} );    }});var david = new Person({        ‘location‘: ‘Nevada‘    ,   ‘picture‘: ‘david.jpg‘});// 创建person，成功后触发’person.create’事件，从而视图可获知该事件然后基于新的模型数据渲染david.create( ‘person.create‘ );

//参数及返回值同Post//使用方法var Person = Gillie.Model.extend({    // 从服务器端获取数据    sync: function( event ) {        this.Get( ‘person/:_id‘, event );    }});// 创建person对象，并获取其信息var maria = new Person({    _id: 10});// 获取maria的信息，请求完成后触发’person.get’事件maria.get( ‘person.get‘ );

//参数及返回值同post//使用方法var Person = Gillie.Model.extend({    // 更新person    update: function( event ) {        this.Put( ‘person/:_id‘, event );    }});var jordan = new Person({        ‘_id‘: 11    ,   ‘localtion‘: ‘New York‘});// 更新Jordan的数据，请求完成后触发’person.update’事件jordan.update( ‘person.update‘ );

//参数及返回值同Post//使用方法var Person = Gillie.Model.extend({   // 删除person   delete: function( event ) {        this.Delete( ‘person/:_id‘, event );   }});var jenny = new Person({        _id: 13})// 删除服务器上的person信息，完成后触发’person.delete’事件，监听者可据此改变dom以及类似的行为jenny.delete( ‘person.delete‘ );

//获取model的某个属性//使用方法var Car = Gillie.Model.extend({});// 创建一个新的car对象var camaro = new Car({        year: 2014    ,   cubic_inches: 378    ,   manufacturer: ‘Chevrolet‘});// 获取并打印car 对象的 manufacturer属性var manufacturer = camaro.get( ‘manufacturer‘ );console.log( manufacturer ); // Chevrolet

//设置模型的某个属性或一组属性//使用方法var Car = Gillie.Model.extend({});var camaro = new Car();// 传递key-value值对camaro.set( ‘year‘, 2014 );// 传递多个key-value组成的对象camaro.set({        manufacturer: ‘Chevrolet‘    ,   cubic_inches: 378});// 获取属性值console.log( camaro.get( ‘year‘ ) ); // 2014

//移除模型属性//使用方法var Car = Gillie.Model.extend({});var camaro = new Car({        year: 2014    ,   cubic_inches: 378    ,   color: ‘black‘});// 移除car对象的color属性camaro.unset( ‘color‘ );console.log( camaro.get( ‘color‘ ) ); // null

//以json对象格式返回模型中定义的属性//使用方法var Car = Gillie.Model.extend({});var camaro = new Car({        year: 2014    ,   manufacturer: ‘Chevrolet‘});// 模型属性组合成对象var attributes = camaro.toJSON();console.log( attributes ); // { year: 2014, manufacturer: ‘Chevrolet‘ }

//初始化：创建视图实例时调用该初始化方法，用于声明该视图将监听哪些事件//使用方法var Post = Gillie.View.extend({        initialize: function() {            // 监听模型’post.create’事件            model.on( ‘post.create‘, this.onCreate );        }        // post请求完成后调用    ,   onCreate: function( modelInstance, response ) {            // 渲染dom        }});// 创建post实例，同时运行初始化方法var postView = new Post();

//On()方法，用于监听事件，和触发回掉。//使用方法// 模型定义var PostModel = Gillie.Model.extend({        url: ‘http://localhost/api/v1/‘    ,   create: function() {            this.Post( ‘post/‘, ‘post.create‘ );        }});// 创建模型实例postModel = new PostModel({        title: ‘New post title‘    ,   description: ‘Lorem ipsum dolor sit amet‘});// 视图定义var PostsView = Gillie.View.extend({        initialize: function() {            // 监听模型的’post.create’事件            postModel.on( ‘posts.create‘, this.onCreate );        }        // 当’posts.create’事件触发后回调用该方法    ,   this.onCreate: function( postInstance ) {            console.log( postInstance.get( ‘title‘ ) +                ‘. Has been created.‘            );        }});postView = new PostView();// 使用模型方法’create’来存储post请求。//当post执行完成后，视图将会影响该事件，即打印‘New post title. Has been created’.postModel.create(); 

//使用方法// 创建模型定义和模型实例var PostModel = Gillie.Model.extend({});var postModel = new PostModel();// 视图定义var PostView = Gillie.View.extend({        initialize: function() {            postModel.on( ‘post.custom_event‘, this.onCustomEvent );        }    ,   onCustomEvent: function( str, obj ) {            console.log( str ); // 附加数据            console.log( obj ); // { one: 1, two: 2 }        }});// 创建视图实例var postView = new PostView();postModel.trigger(        ‘post.custom_event‘    ,   ‘Additional data‘    ,   { one: 1, two: 2 });

//使用方法var PostModel = Gillie.Model.extend({});var postModel = new PostModel();// 视图定义var PostView = Gillie.View.extend({    onEdit: function( attributes ) {        console.log( attributes ); // { title: ‘New title‘ }    }});var postView = new PostView();// 监听模型’post.change’事件postView.listenTo( postModel, ‘post.change‘, postView.onEdit );// 触发模型事件postModel.set( ‘title‘, ‘New title‘ )    .trigger( ‘post.change‘, postModel.toJSON() )