前面几篇 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')); //

john.age = 45; //这种方式赋值, 不能设置到 john.attributes 中去

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

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的更多相关文章

  1. Backbone.js 中的Model被Destroy后，不能触发success的一个原因

    下面这段代码中, 当调用destroy时,backbone会通过model中的url,向服务端发起一个HTTP DELETE请求, 以删除后台数据库中的user数据. 成功后,会回调触发绑定到dest ...

  2. Backbone.js学习之Model

    首先,我们看一下官方文档中对Model的解释(或者说定义): Models are the heart of any JavaScript application, containing the in ...

  3. 理解 backbone.js 中的 bind 和 bindAll 方法，关于如何在方法中指定其中的 this，包含apply方法的说明[转载]

    转载自:http://gxxsite.com/content/view/id/132.html 在backbone.js的学习过程中,被bind和bindAll弄得有点晕,这里包括underscore ...

  4. Backbone.js中的where和findWhere

    小编的公司框架用的MVC框架依旧是Backbone.js,老大说框架不重要,重要的是框架的编程思想.于是乎,小编从头开始学习Backbone.走马观花似的看了下API文档,撸起袖子就是干.但是碰到一个 ...

  5. 谈谈Backbone.js中的el

    小编最近开始接触backbone.js,这个曾经非常优秀的一款MVC前端框架,在学习的过程中,遇到下图的这样一个问题 下面上代码 小编的想法很简单,只是view了一个实例,然后在initalize中调 ...

  6. Backbone.js入门教程

    原文: Getting Started with Backbone.js 不像其它的Web开发语言,过去Javascript很少可用的架构.令人感到高兴的是,最近几年这种情况得到非常大的改善. 今天我 ...

  7. 用Backbone.js创建一个联系人管理系统(一)

    原文 Build a Contacts Manager Using Backbone.js: Part 1 在这个教程里我们将会使用Backbone.js,Underscore.js,JQuery创建 ...

  8. Backbone.js的技巧和模式

    Backbone.js的技巧和模式 Backbone.js的技巧和模式   本文由白牙根据Phillip Whisenhunt的<Backbone.js Tips And Patterns> ...

  9. Backbone.js源码浅介

    终于看到一个只有一千多行的js框架了,于是抱着一定可以看懂他的逻辑的心态,查看了他的整个源码,进去之后才发现看明白怎么用容易,看懂怎么写的就难了,于是乎有了这篇博客的标题:浅介,只能粗浅的介绍下Bac ...

随机推荐

  1. OSX下面用ffmpeg抓取桌面以及摄像头推流进行直播

    参考博客 http://blog.chinaunix.net/uid-11344913-id-4665455.html 在osx系统下通过ffmpeg查看设备 ffmpeg -f avfoundati ...

  2. Linux __attribute__(("hidden"))、default

    记录下: Linux下导出so库接口时在下面情况下无法导出(编译时增加了__attribute__(("hidden"))属性). void * __attribute__((&q ...

  3. 使用 IntraWeb (23) - 基本控件之 TIWTimer、TIWProgressBar、TIWProgressIndicator、TIWTimeEdit

    TIWTimer //和 TTimer 没多大区别, 它的默认事件现在是异步的(OnAsyncTimer), 在网络上使用 OnTimer 肯定是非常糟糕的 TIWProgressBar //进度条 ...

  4. Redis使用小结

    Redis官方没有windows版本的,对于Windows环境的redis,有如下两个方案 微软的移植版本,但只支持到3.2 下载地址 win10及以上的版本直接通过win10的liunx子系统执行 ...

  5. .net core下的dotnet全局工具

    .net core 2.1后支持了一个全新的部署和扩展命令,可以自己注册全局命令行. dotnet install tool -g dotnetsaydotnetsay 也可以自己构建自己的命令行,一 ...

  6. [Go] defer 语句

    Go 还有一些特有的流程控制语句,其中一个就是 defer 语句.该语句用于延迟调用指定的函数,它只能出现在函数的内部,由 defer 关键字以及针对某个函数的调用表达式组成.这里被调用的函数称为 延 ...

  7. 【权限设计】一个案例，三个角色，简单说下B端产品的权限设计

    入行以来也接触过一些B端产品,这些产品之中权限管理是重中之重,权限管理不仅仅是整个系统的一个小小的模块,它一直贯穿整个系统,从登陆到操作到最后的登出.说它相当的复杂真不为过. 对于权限,如果从控制力来 ...

  8. oracle HA 高可用性具体解释（之二，深入解析TAF，以及HA框架）

    oracle HA 高可用性具体解释(之中的一个,client.server端服务具体解释):http://write.blog.csdn.net/postedit 我们已经看到TAF是的Oracle ...

  9. AutoMapper在MVC中的运用01-配置、使用、单元测试、举例

    MVC中,如果想在Domain Model和View Model之间建立映射,用AutoMapper是一个不错的选择.不仅如此,AutoMapper能在不同对象之间建立映射,比如string与int类 ...

  10. Netty 包头

    LengthFieldBasedFrameDecoder 常用的处理大数据分包传输问题的解决类,先对构造方法LengthFieldBasedFrameDecoder中的参数做以下解释说明 maxFra ...