（二）backbone

Demo介绍

学习了如何基本的使用Backbone，展示用户信息

使用JQuery操作DOM，backbone.localStorage.js操作localstorage

大体实现

•创建user Model

var User = Backbone.Model.extend({
        defaults: {
            username: '小强'
        },
        initialize: function() {
            if (!this.get("username")) {
                this.set({"username": this.defaults.username});
            }
            if (!this.get("userid")) {
                this.set({"userid": ++userid});
            }
        }
    });

•创建user Collection管理users

var UserCollection = Backbone.Collection.extend({
    model: User,
    // 持久化到本地数据库
    localStorage: new Store("users")
});

•创建View

按功能页划分：

- 列表页

- 添加（修改）页

- 详情页

创建基础View

var View = Backbone.View.extend({
    register:function (state) {    
        this.state = state;
        return this;
    }
});

创建User Item 视图

var UserItemView = View.extend({
    tagName: 'li',  // 放view展示内容的外层容器,默认div
    template: _.template($('#user-item-template').html()),
    render: function () {    // 渲染
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    events:{  // 事件列表
        'click .removeUser': 'deleteUser',
        'click .viewUser': 'viewUser'
    },
    viewUser: function() {
        this.state.trigger('viewUser', this.model);
    },
    deleteUser: function() {
        this.state.trigger('removeUser', this.model);
        this.remove();
    }
});

创建User list 视图，该视图可创建user item view

var userListView = View.extend({
    template: _.template($('#list-template').html()),
    initialize: function() {
        var view = this;
        this.state = new Backbone.Model();  // 实例化一个model
        this.router = this.options.router;
        // 调用fetch触发reset
        this.collection.unbind('reset');
        this.collection.bind('reset', this.addAll, this);
        setTimeout(function(){
            view.collection.fetch();
        },0);
    },
    render: function() {
        var view = this;
        this.$el.html(this.template(this.state.toJSON()));
        // 服务器同步
        this.state.on('removeUser', function(user) {
            user.destory();
            view.collection.remove(user);
        });
        this.state.on('viewUser', function(user) {
            view.router.navigate('user/' + user.cid, {trigger:true});
        });
        
        return this;
    },
    createUserItemView: function(user) {
        var userItemView = new UserItemView({
            model: user
        });
        userid = Math.max.call(null, user.get('userid'),userid);
        userItemView.register(this.state).render().$el.appendTo($('#list'));
    },
    addAll: function() {
        this.collection.each(this.createUserItemView.bind(this));
    }
}); 

User Modify 视图

var UserModifyView = View.extend({
    template: _.template($('#modify-template').html()),
    initialize: function() {
        this.router = this.options.router;
    },
    render: function() {
        var view = this;
        if(this.model) {
            this.$el.html(this.template(this.model.toJSON()));
        }
        else {
            this.$el.html(this.template({username: ''}));
        }
        setTimeout(function() {
            view.$el.find('input').focus().select();    //设置焦点并选中
        }, 0);
        return this;
    },
    events: {
        'click a.add': 'modify'
    },
    modify: function(){
        var view = this;
        if(this.model){
            this.model.save({'username': this.$el.find('input').val()});
        }
        else {
            this.router.userCollection.create(new User({
                username:view.$el.find('input').val(),
                userid: ++userid
            }));
        }
        this.router.navigate('list', {trigger:true});   // 跳转至list
    }
});

User Detail 视图

var UserView = View.extend({
    template: _.template($('#user-template').html()),
    initialize: function(){
        this.router = this.options.router;
    },
    render: function(){
        var view = this;
        this.$el.html(this.template(this.model.toJSON()));
        return this;
    },
    events: {
        'click .editUser': 'editUser'
    },
    editUser: function() {
        this.router.navigate('edit/' + this.model.cid, {trigger:true});
        this.remove();
    }
});

注：以上使用的backbone版本是0.9.2，该版本Backbone.View中可导出options属性，但1.1.2 版本已不再提供该属性

因此，View的定义、实例化可改为：

var UserListView = View.extend({
        ...
        initialize: function() {
            var view = this;
            this.state = new Backbone.Model();
            this.router = this.attributes.router;   // 使用attributes属性获取
            ...
        }
        ...
})

this.currentView = new UserListView({
    collection: router.userCollection,
    attributes:{router:router}    // 使用attributes属性传递
    }).render().$el.appendTo($(this.el));

•Router 控制器

使用控制器将定义的类进行组合

var App = Backbone.Router.extend({
    initialize: function(el) {
        this.el = el;
        this.userCollection = new UserCollection();
    },
    routes: {
        '': 'list',
        'list': 'list',
        'add': 'edit',
        'edit/:cid': 'edit',
        'user': 'user',
        'user:/:cid': 'user'
    },
    list: function() {
        var router = this;
        this.clean();
        this.currentView = new UserListView({
            collection: router.userCollection,
            router:router
        }).render().$el.appendTo($(this.el));
    },
    edit: function(cid) {
        var router = this,
            user = null;
        this.clean();
        if(cid){
            user = router.userCollection.getByCid(cid);
        }
        this.currentView = new UserModifyView({
            model:user,
            router:router
        }).render().$el.appendTo($(this.el));
    },
    user: function() {
        var router = this,
            user = null;
        this.clean();
        if(cid){
            user = router.userCollection.getByCid(cid);
        }
        this.currentView = new UserView({
            model:user,
            router:router
        }).render().$el.appendTo($(this.el));
    },
    clean:function () {
        if (this.currentView) {
            this.currentView.remove();
            this.currentView = null;
        }
    }
});

 •实例化App

new App('body');
Backbone.history.start();

 •html

<!DOCTYPE html>
<html>
<head>
    <title>用户列表以及详细信息</title>
    <meta charset="UTF-8"/>
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <!-- 公共库 -->
    <script type="text/javascript" src="js/lib/jquery.js"></script>
    <script type="text/javascript" src="js/lib/underscore.js"></script>
    <script type="text/javascript" src="js/lib/backbone.js"></script>
    <!-- 本地存储库 -->
    <script type="text/javascript" src="js/lib/backbone.localStorage.js"></script>
    <!--应用库-->
    <script type="text/javascript" src="js/app.js"></script>
</head>
<body>
    <script type="text/template" id="list-template">
        <a href="#add">增加新用户</a>
        <ul id="list">
            
        </ul>
    </script>
    <script type="text/template" id="user-item-template">
        <a class="viewUser" href="javascript:;"><%= username %></a>
        <a class="removeUser" href="javascript:;">删除</a>
    </script>
    <script type="text/template" id="user-template">
        <p>编号<%= userid %>：</p>
        <a href="javascript:;" class="editUser">名字：<%= username %></a>
    </script>
    <script type="text/template" id="modify-template">
        <input type="text" value="<%= username %>">
        <a class="add" href="javascript:;"><%= !username ? "增加":"修改" %></a>
    </script>
</body>
</html>