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

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script src="jquery-1.9.1.js"></script>

    <script src="underscore.js"></script>

    <script src="backbone.js"></script>

</head>

<body>

    <button id="check">新手报到</button>

    <ul id="world-list">

    </ul>

    <script>

    (function ($) {

        var World=Backbone.Model.extend({

            name:null //为什么要创建一个空的name

        });

        var Worlds=Backbone.Collection.extend({

            initialize:function(models,options){

                this.on("add", options.view.addOneWorld);//初始化绑定add方法

            }

        });

        var  AppView=Backbone.View.extend({

            el:$('body'),//指定关联的元素

            initialize:function(){//初始化方法

                this.worlds=new Worlds(null,{view:this})//实例化一个集合，并且建一个属性view用来保存视图

            },

            events:{

                'click #check':"checkIn"//绑定#check的click事件

            },

            checkIn:function(){

                var world_name=prompt("请问，您是哪星人?");

                world_name||(world_name = '未知');

                var world=new World({name:world_name});//实例化一个模块，并设置name的值

                this.worlds.add(world);//将模块添加到集合

            },

            addOneWorld:function(model){

                $("#world-list").append("<li>这里是来自 <b>" + model.get('name') + "</b> 星球的问候</li>");

            }

        });

        var appview = new AppView;//实例化AppView

    })(jQuery);

    </script>

</body>

</html>

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

var User=Backbone.Model.extend({

    defaults:{

        name:'susan',

        age:18

    },

    url:"1.html",//需要设置url，因为save会调用sync方法把数据提交到服务器

    initialize:function(){

        this.on("invalid",function(model,error){//初始化时绑定验证未通过时的事件处理函数

            console.log(error);

        });

    },

    validate:function(attributes){//重写验证方法 不返回或返回falsy值（假值）时不会触发invalid?

        if(attributes.name==""){

            return "name 不能为空！";

        }

    }

});

var user=new User();

user.set("name","");

user.save();//当save时会触发validate方法

3 根目录 urlRoot

var Book = Backbone.Model.extend({

    urlRoot:'/backbone_test',

    defaults:{"name":"Su","age":14}

});

var solaris = new Book({id: "data.php"});

console.log(solaris.url());///backbone_test/data.php 

solaris.save();

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

var Book = Backbone.Model.extend({//创建一个Model

    defaults : {

        title:'default'

    }

});

var BookShelf = Backbone.Collection.extend({//创建一个集合

    model : Book,

    url:'user.json'

});

var book1 = new Book({title : 'book1'});//实例化二个model

var book2 = new Book({title : 'book2'});

var bookShelf = new BookShelf([book1, book2]); //实例化集合，并将这2个model添加到集合中，也可以使用collection.add(model)添加。

// bookShelf.url = 'user.json'; //或者在这里添加url

bookShelf.fetch({

    success:function(collection, response, options){

        collection.each(function(book){

            console.log(book.get('title'));//default

        });

    },error:function(collection, response, options){

        console.log('error');

    }

});

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

var NewBooks = Backbone.Collection.extend({

    model: Book,

    url: '/books/'

});

var books = new NewBooks;

var onebook = books.create({

    title: "I'm coming",

});

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. 一步一步学Silverlight 2系列（20）：如何在Silverlight中与HTML DOM交互（下）

    述 Silverlight 2 Beta 1版本发布了,无论从Runtime还是Tools都给我们带来了很多的惊喜,如支持框架语言Visual Basic, Visual C#, IronRuby, ...

  2. 子元素margin带动父元素拖动

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. 用/proc/stat计算cpu的占用率

    转自:http://blog.csdn.net/pppjob/article/details/4060336 在Linux下,CPU利用率分为用户态,系统态和空闲态,分别表示CPU处于用户态执行的时间 ...

  4. 【NOIP2012】 国王游戏

    [题目链接] 点击打开链接 [算法] 按ai * bi升序排序,贪心即可 [代码] #include<bits/stdc++.h> using namespace std; #define ...

  5. MyBatis相关资源

    MyBatis很多项目中有用到,但会用并不表示你真正理解它,更不代表你能很清楚的教会别人.如果想在会用它的基础上更深入的通过学习它而提升自己技术能力,可利用下面资源. 1.官网文档,基本概念讲的很清楚 ...

  6. EF提高性能

    实体框架 5 性能注意事项 作者:David Obando.Eric Dettinger 等 发布时间:2012 年 4 月 1.简介 对象关系映射框架是一种在面向对象的应用程序中提供数据访问抽象的便 ...

  7. vue+webpack 引入jquery

    1 首先 cnpm install jquery:这时jquery已经安装成功,可以使用jquery,但是jquery不是全局的,需要在使用的组件中引入jquery,jquery的路径是jquery/ ...

  8. 877C

    构造 想了好长时间... 答案是n+n/2 我们这么想,先把偶数位置炸一遍,所有坦克都在奇数位置,然后再把奇数炸一遍,坦克都到偶数去了,然后再炸一次偶数就都炸掉了... 好巧妙啊 奇偶讨论很重要 #i ...

  9. 我的Android笔记（十）—— ProgressDialog的简单应用，等待提示 （转载）

    转自:http://blog.csdn.net/barryhappy/article/details/7376231 在应用中经常会用到一些费时的操作,需要用户进行等待,比如加载网页内容…… 这时候就 ...

  10. Codeforces - 1117E - Crisp String - 进制 - 交互

    https://codeforces.com/problemset/problem/1117/E 就用abc表示数字来给每个数编码,编完直接问出移动的结果,反构造就行了,比C和D还简单. #inclu ...