首先,我们看一下官方文档中对Model的解释(或者说定义):

Models are the heart of any JavaScript application, containing the interactive data as well as a large part of the logic surrounding it: conversions, validations, computed properties, and access control. You extend Backbone.Model with your domain-specific methods, and Model provides a basic set of functionality for managing changes.

翻译成中文就是:

Model是js应用的核心,包括交互数据以及围绕着这些数据的大部分逻辑:数据转换、验证、属性计算和访问控制。你可以使用特定方法来扩展Backbone.Model,并且Model本身就提供了一系列基本的管理功能。

然后,我们还在文档中看到Model拥有好多方法,这里就不一一介绍了。

简单的Model例子

定义了一个最基础的Model,只是实现了initialize这个初始化方法。这个函数会在Model被实例化时调用。

  1. var Man = Backbone.Model.extend({
  2. constructor: function(){
  3. alert('Hey, you create me!');
  4. }
  5. });
  6. var man = new Man;

初始化函数,也可以叫构造函数。比如你这里完全可以把constructor写成initialize,效果是一样的。至于为什么一样?这还得等到熟悉这个框架过后看看Backbone源码才能知道。

Molde对象属性赋值的两种方法

一种是设置默认值

  1. var Man = Backbone.Model.extend({
  2. initialize: function(){
  3. alert('Hey, you create me!');
  4. },
  5. defaults: {
  6. name:'张三',
  7. age: '38'
  8. }
  9. });
  10. var man = new Man;
  11. console.info(man.get("name"));

或者这样赋值

  1. man.set({name:'the5fire',age:'10'});
  2. console.info(man.get("name"));
  3. console.info(man);

从这个对象的取值方式可以知道,属性在一个Model是以字典(或者类似字典)的方式存在的,第一种设定默认值的方式,只不过是实现了Backbone的defaults这个方法,或者是给defaults进行了赋值。通过打印出man这个对象,我们可以发现,属性是存在一个叫做attributes的对象中的。

Model对象中的方法

  1. var Man = Backbone.Model.extend({
  2. initialize: function(){
  3. alert('Hey, you create me!');
  4. },
  5. defaults: {
  6. name:'张三',
  7. age: '38'
  8. },
  9. aboutMe: function(){
  10. return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  11. }
  12. });
  13. var man = new Man;
  14. alert(man.aboutMe());

也是比较简单,只是增加了一个新的属性,值是一个function。说到这,不知道你是否发现,在所有的定义或者赋值操作中,都是通过字典的方式来完成的,比如extend Backbone的Model,以及定义方法,定义默认值。方法的调用和其他的语言一样,直接 "." 即可,参数的定义和传递也一样。

监听Model对象中属性的变化

假设你有在对象的某个属性发生变化时去处理一些业务的话,下面的示例会有帮助。依然是定义那个类,不同的是我们在构造函数中绑定了name属性的change事件。这样当name发生变化时,就会触发这个function。

  1. var Man = Backbone.Model.extend({
  2. initialize: function(){
  3. alert('Hey, you create me!');
  4. //初始化时绑定监听
  5. this.bind("change:name",function(){
  6. var name = this.get("name");
  7. alert("你改变了name属性为:" + name);
  8. });
  9. },
  10. defaults: {
  11. name:'张三',
  12. age: '38'
  13. }
  14. });
  15. var man = new Man;
  16. //触发绑定的change事件,alert。
  17. man.set({name:'the5fire'});
  18. //触发绑定的change事件,alert。
  19. man.set({name:'the5fire.com'});

为Model对象添加验证规则,以及错误提示

  1. var Man = Backbone.Model.extend({
  2. initialize: function(){
  3. alert('Hey, you create me!');
  4. //初始化时绑定监听, change事件会先于validate发生
  5. this.bind("change:name",function(){
  6. var name = this.get("name");
  7. alert("你改变了name属性为:" + name);
  8. });
  9. this.bind("invalid",function(model,error){
  10. alert(error);
  11. });
  12. },
  13. defaults: {
  14. name:'张三',
  15. age: '38'
  16. },
  17. validate:function(attributes){
  18. if(attributes.name == '') {
  19. return "name不能为空!";
  20. }
  21. }
  22. });
  23. var man = new Man;
  24. // 这种方式添加错误处理也行
  25. // man.on('invalid', function(model, error){
  26. // alert(error);
  27. // });
  28. //默认set时不进行验证
  29. man.set({name:''});
  30. //save时触发验证。根据验证规则,弹出错误提示。
  31. man.save();
  32. //手动触发验证, set时会触发
  33. man.set({name:'moyi'}, {'validate':true});
  34. //验证通过时信息
  35. if (man.isValid()) {
  36. alert(man.get("name")+"验证通过");
  37. }

和服务器进行交互,Model对象的保存和获取

由于本人比较懒,这里就暂时不去折腾服务器了。交互数据这些东西就用jquery-mockjax模拟一下得了(PS:前面有写过一篇关于mockjax的文章)。

这里AJAX请求模拟

  1. var isAjaxMocked = true;
  2. if (isAjaxMocked) {
  3. $.mockjax({
  4. url: '/man/read',
  5. status: 200,
  6. type: "get",
  7. responseTime: 100,
  8. responseText: {'name': 'Moyi', 'age': '1111'}
  9. });
  10. $.mockjax({
  11. url: '/man/update',
  12. status: 200,
  13. type: "post",
  14. responseTime: 100,
  15. responseText: {'name': 'qianlan', 'age': '11'}
  16. });
  17. }
  1. // 和服务器进行交互,对象的保存和获取
  2. var Man = Backbone.Model.extend({
  3. url:'/man/update',
  4. initialize: function(){
  5. console.log('Hey, you create me!');
  6. //初始化时绑定监听
  7. this.bind("change:name",function(){
  8. var name = this.get("name");
  9. console.log("你改变了name属性为:" + name);
  10. });
  11. this.bind("error",function(model,error){
  12. console.log(error);
  13. });
  14. },
  15. defaults: {
  16. name:'张三',
  17. age: '38'
  18. },
  19. validate:function(attributes){
  20. if(attributes.name == '') {
  21. return "name不能为空!";
  22. }
  23. },
  24. aboutMe: function(){
  25. return '我叫' + this.get('name') + ',今年' + this.get('age') + '岁';
  26. }
  27. });
  28. var man = new Man;;
  29. man.set({name:'the5fire'});
  30. //会发送POST到模型对应的url,数据格式为json{"name":"the5fire","age":38}
  31. // man.save();
  32. man.save({"name":"the5fire","age":38},{url:'/man/update',
  33. success:function(model,response){
  34. console.log('success');
  35. //model为获取到的数据
  36. console.log(model.get('name')+" and "+model.get('age'));
  37. },error:function(){
  38. //当返回格式不正确或者是非json数据时,会执行此方法
  39. console.log('error');
  40. }
  41. });
  42. //然后接着就是从服务器端获取数据使用方法fetch([options])
  43. var man1 = new Man;
  44. //第一种情况,如果直接使用fetch方法,
  45. //那么他会发送get请求到你model的url中,
  46. //你在服务器端可以通过判断是get还是post来进行对应的操作。
  47. // man1.fetch();
  48. //第二种情况,在fetch中加入参数,如下:
  49. // man1.fetch({url:'/man/read'});
  50. //这样,就会发送get请求到/getmans/这个url中,
  51. //服务器返回的结果样式应该是对应的json格式数据,同save时POST过去的格式。
  52. //不过接受服务器端返回的数据方法是这样的:
  53. man1.fetch({url:'/man/read',
  54. success:function(model,response){
  55. console.log('success');
  56. //model为获取到的数据
  57. console.log(model.get('name')+" and "+model.get('age'));
  58. },error:function(){
  59. //当返回格式不正确或者是非json数据时,会执行此方法
  60. console.log('error');
  61. }
  62. });

Model部分暂时就到这里,总的来说,Model就是对数据以及和数据有关的逻辑的一些处理。

Backbone.js学习之Model的更多相关文章

  1. 【转】Backbone.js学习笔记(二)细说MVC

    文章转自: http://segmentfault.com/a/1190000002666658 对于初学backbone.js的同学可以先参考我这篇文章:Backbone.js学习笔记(一) Bac ...

  2. Backbone.js学习之二

    经历一段自我修炼,终于领悟到Backbone.js的关键知识点,也发现了原来MVC可以在前端这样梦幻的发挥,Backbone.js确实是一个很有魅力的前端MVC框架. 练就一门技术,需要有扎实的功底, ...

  3. Backbone.js学习之初识hello-world

    说了好久好久要学习Backbone.js,现在终于下定决心开始学习了.然后呢,就根据我的学习进度在这里做个简单的记录,方便新人,也方便我自己以后回忆. 准备 用bower下载这几个库或框架也是醉了.. ...

  4. Backbone.js 中使用 Model

    前面几篇 Backbone.js 的例子中有使用到 template, 及数据的填充,其实这已经很接近 Model 了.现在来学习怎么创建自己的 Model 类,并简单的使用.Backbone.js ...

  5. 【转】Backbone.js学习笔记(一)

    文章转自: http://segmentfault.com/a/1190000002386651 基本概念 前言 昨天开始学Backbone.js,写篇笔记记录一下吧,一直对MVC模式挺好奇的,也对j ...

  6. Backbone.js学习之Backbone.View(视图)

    Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中模型用于绑定键值数据和自定义事件:集合附有可枚举函数的丰富API: 视 ...

  7. Backbone.js学习之一

    昨天一个我崇拜的朋友,徐飞送我一本名为<Backbone.js实战>书,让我心中狂喜,于是带着这份浓厚的兴趣,开始研究Backbone.js之路. 打开这本书的第一句话就很有哲理,“授人以 ...

  8. backbone.js学习笔记

    之前只接触过jQuery,看来Backbone是除了jQuery的第二大JS框架... backbone到底是个啥? 其实刚开始我也不知道=_=,我是这周二才听说居然还有这么个框架...于是乎我的导师 ...

  9. Backbone.js学习之View

    千呼万唤始出来,终于到最后一个要点View了.照旧,先来一睹官方文档: Backbone views are almost more convention than they are code - t ...

随机推荐

  1. ps:探索按钮按起落下的技巧

    (从死了一次又一次终于挂掉的百度空间中抢救出来的,发表日期 2014-07-10) 先上图: 那个看上去想按下去的,那个看上去像自然地呢? 显而易见: 第一像按下去的,第二个像自然地. 原因: 渐变: ...

  2. Swift学习资源

    原文: http://leancodingnow.com/swift-learning-resources/ Swift是Apple在今年的WWDC推出的一门新的编程语言,它的1.0版本跟着Xcode ...

  3. U8记账凭证修改方法汇总

    在输入记账凭证时,尽管账务系统提供了多种控制错误的措施,但错误凭证的出现是难免的,为此,系统必须能够提供对错误凭证修改的功能.目前,许多财 务软件(如:用友.安易.三门)都提供了“反审核.反记账.反结 ...

  4. C++组合问题

    求一个组合,如C(16,3),我们可以通过公式求出这有多少个数,但怎么把这些数表示出来呢? 代码: #include<iostream> #include<stdio.h> # ...

  5. Asp.net使用jQuery实现数据绑定与分页

    使用jQuery来实现Gridview, Repeater等服务器端数据展示控件的数据绑定和分页.本文的关注重点是数据如何实现数据绑定. Content jQuery的强大和可用性使得其迅速的流行起来 ...

  6. hdu 5286 How far away ? tarjan/lca

    How far away ? Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://acm.hdu.edu.cn/showproblem.php?pi ...

  7. 使用贝赛尔曲线画扇形、圆形、弧线、多边形,实现App下载时的动画效果demo

    // // MyView.swift // TestUIBezierPath // // Created by iCodeWoods on 16/5/8. // Copyright © 2016年 i ...

  8. iOS开发——UI篇Swift篇&UITextView

    UITextView 一:UITextView使用及其属性的设置 titleLabel.text = titleString //创建UITextView对象 textView = UITextVie ...

  9. Web前段优化,提高加载速度 css

    前言:  在同样的网络环境下,两个同样能满足你的需求的网站,一个"Duang"的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒, ...

  10. javascript冷知识

    本人很少写博客,所以文笔很不好,如果解释的不够清楚的,欢迎点评 1.+号(一元加操作符): 如果放在数值前的话,对数值不会产生任何影响,不过放在其他的数据类型前面的话,就等于调用number()将他转 ...