Backbone with Model

Simple example shows how to user Model in Backbone

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min.js"></script>
<div id="container"></div>

<script type="text/template" id="person_template">
    <%= name %>'s age is <%= age %>
</script>

<br/>
<hr> 下面是调试输出区域
<pre></pre>

CSS

body {
    font-size: 14px;
    color: blue;
}

pre {
    color: red;
}

JavaScript

//定义 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',  
    age : 25  
});  

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

debug(john);
debug(john.attributes);

var peopleView = new PeopleView({model: john});

//这是一个辅助调试的函数，因为 JSFiddle 最好不要用 document.write, 且 console.log() 输出也不便于查看
function debug(arg){
    $("pre").append(JSON.stringify(arg, null, 2) +"<br/>");
}