1、模块 集合 视图 和事件的一个综合例子

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Document</title>
  6.     <script src="jquery-1.9.1.js"></script>
  7.     <script src="underscore.js"></script>
  8.     <script src="backbone.js"></script>
  9.  
  10. </head>
  11. <body>
  12.     <button id="check">新手报到</button>
  13.     <ul id="world-list">
  14.     </ul>
  15.     <script>
  16.     (function ($) {
  17.  
  18.         var World=Backbone.Model.extend({
  19.             name:null //为什么要创建一个空的name
  20.         });
  21.  
  22.         var Worlds=Backbone.Collection.extend({
  23.             initialize:function(models,options){
  24.                 this.on("add", options.view.addOneWorld);//初始化绑定add方法
  25.             }
  26.         });
  27.  
  28.         var  AppView=Backbone.View.extend({
  29.             el:$('body'),//指定关联的元素
  30.             initialize:function(){//初始化方法
  31.                 this.worlds=new Worlds(null,{view:this})//实例化一个集合，并且建一个属性view用来保存视图
  32.             },
  33.             events:{
  34.                 'click #check':"checkIn"//绑定#check的click事件
  35.             },
  36.             checkIn:function(){
  37.                 var world_name=prompt("请问，您是哪星人?");
  38.                 world_name||(world_name = '未知');
  39.  
  40.                 var world=new World({name:world_name});//实例化一个模块，并设置name的值
  41.                 this.worlds.add(world);//将模块添加到集合
  42.             },
  43.             addOneWorld:function(model){
  44.                 $("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候</li>");
  45.             }
  46.         });
  47.         var appview = new AppView;//实例化AppView
  48.  
  49.     })(jQuery);
  50.     </script>
  51. </body>
  52. </html>

2、为对象添加验证规则与错误提示

  1. var User=Backbone.Model.extend({
  2.     defaults:{
  3.         name:'susan',
  4.         age:18
  5.     },
  6.     url:"1.html",//需要设置url，因为save会调用sync方法把数据提交到服务器
  7.     initialize:function(){
  8.         this.on("invalid",function(model,error){//初始化时绑定验证未通过时的事件处理函数
  9.             console.log(error);
  10.         });
  11.     },
  12.     validate:function(attributes){//重写验证方法 不返回或返回falsy值（假值）时不会触发invalid?
  13.         if(attributes.name==""){
  14.             return "name 不能为空！";
  15.         }
  16.     }
  17. });
  18. var user=new User();
  19. user.set("name","");
  20. user.save();//当save时会触发validate方法

3 根目录 urlRoot

  1. var Book = Backbone.Model.extend({
  2.     urlRoot:'/backbone_test',
  3.     defaults:{"name":"Su","age":14}
  4. });
  5.  
  6. var solaris = new Book({id: "data.php"});
  7.  
  8. console.log(solaris.url());///backbone_test/data.php 
  9.  
  10. solaris.save();

4 使用fetch从服务端获取数据（collection中并没有urlRoot属性）

  1. var Book = Backbone.Model.extend({//创建一个Model
  2.     defaults : {
  3.         title:'default'
  4.     }
  5. });
  6.  
  7. var BookShelf = Backbone.Collection.extend({//创建一个集合
  8.     model : Book,
  9.     url:'user.json'
  10. });
  11.  
  12. var book1 = new Book({title : 'book1'});//实例化二个model
  13. var book2 = new Book({title : 'book2'});
  14.  
  15. var bookShelf = new BookShelf([book1, book2]); //实例化集合，并将这2个model添加到集合中，也可以使用collection.add(model)添加。
  16.  
  17. // bookShelf.url = 'user.json'; //或者在这里添加url
  18. bookShelf.fetch({
  19.     success:function(collection, response, options){
  20.         collection.each(function(book){
  21.             console.log(book.get('title'));//default
  22.         });
  23.     },error:function(collection, response, options){
  24.         console.log('error');
  25.     }
  26. });

6 create方法 发送数据到服务端

  1. var NewBooks = Backbone.Collection.extend({
  2.     model: Book,
  3.     url: '/books/'
  4. });
  5.  
  6. var books = new NewBooks;
  7.  
  8. var onebook = books.create({
  9.     title: "I'm coming",
  10. });

create方法会在内部调用save方法，而save方法前面提过它会调用sync把数据提交到服务器。看源码也可以知道，create方法最后返回了创建的model实例

Backbone.js入门教程第二版笔记（1）的更多相关文章

  1. Backbone.js入门教程第二版笔记（3）

    视图渲染 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  2. Backbone.js入门教程第二版笔记（2）

    关于手动触发router,之前看到的例子都是通过在url后面加上#xxx或者点击一个a链接方法来触发, 还有一种情况是通过触发一种规则,来触发另一种规则(表述无能),比如这个例子中,我在url后面加上 ...

  3. Backbone.js入门教程

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

  4. D3.js 入门教程

    最近需要用到d3, 记录下d3的教程 网上搜了几个关于d3的教程 D3.js 入门教程      http://wiki.jikexueyuan.com/project/d3wiki/author.h ...

  5. 【特别推荐】Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  6. python核心编程第二版笔记

    python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d   提供调试输出1.2 –O   生成优化的字节码(生成 ...

  7. Node.js 入门教程和学习资源汇总

    这篇文章与大家分享一批很有用的 Node.js 入门教程和学习资源.Node 是一个服务器端的 JavaScript 解释器,它将改变服务器应该如何工作的概念.它的目标是帮助程序员构建高度可伸缩的应用 ...

  8. 【CC2530入门教程-增强版】基础技能综合实训案例（基础版）-上位机源码

    [CC2530入门教程-增强版]基础技能综合实训案例(基础版)-上位机源码 广东职业技术学院  欧浩源 一.需求分析 按照指定参数打开串口,与测控终端建立数据传输通道,并根据应用要求实现程序逻辑,具体 ...

  9. Vue.js 入门教程

    Vue.js 入门教程:https://cn.vuejs.org/v2/guide/index.html

随机推荐

  1. Cats transport(codeforces311B)(斜率优化)

    \(Cats Transport\) 感觉这道题题面不好讲,就自翻了一个新的,希望有助于大家理解其思路: 大致题意: \(wch\) 的家里有 \(N\) 座山(山呈直线分布,第 \(i-1\) 座山 ...

  2. TCP客户服务端

    创建TCP服务端1.创建一个ServerSocket对象.2.调用accept()方法接收客户端请求.3.从Socket中获取I/O流.4.对I/O流进行读写操作,完成与客户端的交互.5.关闭I/O流 ...

  3. map数据的分组，list数据排序 数据筛选

    sfit0144 (李四) 2015-01-10 18:00:251Sfit0734 (Sfit0734) 2015-01-10 18:00:38go homesfit0144 (李四) 2015-0 ...

  4. KMP 、扩展KMP、Manacher算法 总结

    一. KMP 1 找字符串x是否存在于y串中,或者存在了几次 HDU1711 Number Sequence HDU1686 Oulipo HDU2087 剪花布条 2.求多个字符串的最长公共子串 P ...

  5. open调用过程

    1. 首先传到vfs的do_sys_open,在open.c中. long do_sys_open(int dfd, const char __user *filename, int flags, u ...

  6. Ubuntu bitnami gitlab 安装

    /************************************************************************************** * Ubuntu bit ...

  7. [SoapUI] Read data from response , use it to update parameter

    import com.eviware.soapui.support.GroovyUtils def groovyUtils = new GroovyUtils( context ) def holde ...

  8. 喵哈哈村的魔法考试 Round #1 (Div.2)

    比赛地址:http://qscoj.cn/contest/2/ 都是中文题,这里不在详述题意 A.喵哈哈村的魔法石 分析:暴力求解 #include<iostream> #include& ...

  9. table中tr或者td的点击事件

    直接把时间添加到table或者tbody上,只有下面的tr或者td才能促发事件,通过e.target可以获得当前点击tr或者td,这样就可以进行查询或者删除操作了 如果是删除,直接e.target.r ...

  10. Python的多进程锁的使用

    很多时候,我们需要在多个进程中同时写一个文件,如果不加锁机制,就会导致写文件错乱 这个时候,我们可以使用multiprocessing.Lock() 我一开始是这样使用的: import multip ...