Backbone.js 中使用 Model

JavaScript 的 Model 是一个 JSON 对象，差不多，不过 Backbone 赋予 Model 默认属性，只能通过 getter/setter 方法来访问 Model 中的属性值，不能直接用点操作符，相当于 Backbone 的属性是私有的。

声明 Model 类

var Person = Backbone.Model.extend({  
    defaults : { //看上去是指定默认值，同时也是声明有些什么属性
        name : 'unknown',  
        age : 20
    }  
}); 

使用 Model

// 实例化 Model 对象  
var john = new Person({  
    name : 'John'  //没有指定 age，默认为 20
});  

console.log("1: " + john.name); //undefined
console.log("2: " + john.get('name')); //john

console.log("3: " + john.get('age')); //20

john.age = 45; //这种方式赋值, 不能设置到 john.attributes 中去
console.log("4: " + john.get('age')); //20

john.set({age: 100});
console.dir(john);

因为存储的字段都在对象的 attributes 的属性中，所以不能简单的用点操作来存取值，而要使用

john.get('name');
john.escape('name');  //可转义 HTML 标签
john.set({name:  'Johnson'});
john.set('name', 'Johnson');

再看在 View 中如何显示 Model 中的属性值，因为模板是用点操作来访问属性值的，所以 model 要调用 toJSON() 把属性值释放到第一层级上来。完整的渲染 Model 数据的例子如下：

<script>
    //定义 Model
    var Person = Backbone.Model.extend({  
        defaults : { //声明属性，并指定默认值
            name : 'unknown',  
            age : 20
        }  
    });  

    var PeopleView = Backbone.View.extend({
        el: '#container',
        initialize: function(options) {
            this.render();
        },
        render: function() {
            var template = _.template($("#person_template").html());

            //模板中使用点操作符来访问属性的，obj.name, 所以要 toJSON() 转换
            this.$el.html(template(this.model.toJSON()));
        }
    });

    // 实例化 Model 对象  
    var john = new Person({  
        name : 'John'
    });  

    john.set('age', 30);
    john.age = 45; //这种方式赋值不管用的

    var peopleView = new PeopleView({model: john});
</script>

转自博客：https://www.cnblogs.com/leejersey/p/4307099.html