?【Backbone.js入门教程 #GitHub#】Backbonejs中的Model实践

浏览数：73 / 时间：2015年06月09日

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
    <script src="test/vendor/jquery.js"></script>
    <script src="test/vendor/underscore.js"></script>
    <script src="backbone.js"></script>
    <script>
        var Man = Backbone.Model.extend({
            url: ‘/man/‘,
            initialize: function() {
                console.log(‘initialize‘)
                // 初始化时绑定监听
                this.bind(‘change:name‘, function() {
                    var name = this.get(‘name‘)
                    console.log(‘you changed name to ‘ + name)
                })
                this.bind(‘invalid‘, function(model, error) {
                    console.log(error)
                })
                this.bind(‘error‘, function(model, error) {
                    console.log(error)
                })
            },
            defaults: {
                name: ‘name‘,
                age: ‘age‘
            },
            validate: function(attributes) {
                if (attributes.name == ‘‘) {
                    return ‘name不能为空‘
                }
            },
            aboutMe: function() {
                return ‘wo jiao ‘ + this.get(‘name‘)
            }
        })

        var man = new Man
        console.log(man.get(‘name‘))
        man.set({name: ‘‘})
        console.log(man.get(‘name‘))
        console.log(man.aboutMe())
        // 调用save方法时会post对象的所有属性到server端
        // 调用fetch方法是又会发送get请求到server端
        // 接受数据和发送数据均为json格式
        man.save() // save时触发验证。根据验证规则，弹出错误提示

        //man.fetch()
        //man.fetch({url:‘/man/‘})
        man.fetch({
            url: ‘/man/‘,
            success: function(model, response) {
                // model 为获取到的数据
                console.log(model.get(‘name‘))
            },
            error: function() {
                console.log(‘error‘)
            }
        })
        // 你设置了urlRoot之后，你发送PUT和DELETE请求的时候，其请求的url地址就是：/baseurl/[model.id]
    </script>
</body>
</html>