码迷,mamicode.com
首页 > Web开发 > 详细

Backbone.js 中使用 Model

时间:2015-03-01 15:38:22      阅读:144      评论:0      收藏:0      [点我收藏+]

标签:

前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了。现在来学习怎么创建自己的 Model 类,并简单的使用。Backbone.js 中 Model 会涉及到很多的概念,如 Model 的初始化,默认值,属性的读写,属性值改变的监听,数据渲染,校验,以及与服务端的数据同步等。

本文不打算讲前面大部分的内容,最初思考的一个脉络是怎么把 Model 引入进来,所以线索会是 建立 Model 类 -> 初始化 Model 实例 -> 设置值 -> 渲染到页面,其余 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 数据的例子如下:

<!DOCTYPE html>
<html>
     <head>
         <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>
     </head>
     <body>
        <div id="container"></div>
 
        <script type="text/template" id="person_template">
            <%= name %>s age is <%= age %>
        </script>
    </body>
</html>
  
<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>

点击链接 http://jsfiddle.net/Unmi/4qXz7/ 执行代码可看到结果。上面代码在网页中输出为

John‘s age is 30

现实应用中,一般操作的都是 Model 所组成的集合,所以后面我们会用到 Backbone 的 Collection。这也是 Backbone 中一个重要的概念,继续中。

本文链接 http://unmi.cc/backbone-js-with-model/, 来自 隔叶黄莺 Unmi Blog

Backbone.js 中使用 Model

标签:

原文地址:http://www.cnblogs.com/leejersey/p/4307099.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!