Backbone基础笔记

最新推荐文章于 2024-11-12 11:19:19 发布
最新推荐文章于 2024-11-12 11:19:19 发布
阅读量122 收藏
点赞数
文章标签： javascript json 测试 ViewUI
原文链接：http://www.cnblogs.com/zcynine/p/5158216.html
版权

 

之前做一个iPad的金融项目的时候有用到Backbone，不过当时去的时候项目已经进入UAT测试阶段了，就只是改了改Bug，对Backbone框架算不上深入了解，但要说我一点都不熟悉那倒也不是，我不太喜欢这么不尴不尬地将就着，索性学习学习，整理一下好了。

网上的大牛说Backbone适合做大型的项目，小项目用Backbone有那么些杀鸡用牛刀的感觉，我目前的项目组用的是AngularJS，怎么说呢？个人觉得AngularJS是属于通吃那一类的，也说不出理由，纯粹个人感觉，不过当时写那个iPad项目的时候用了Backbone确实感觉整个结构还蛮清晰的，虽然使用的时候View层和Controller层并没有区分得很清楚。

好歹我那时候还一腔热血地买了本《Backbone.js实战》来看呢？总是不能浪费了。

 

书上一开头先是说underscore再说backbone，我表示这种把API往书里搬真的是很骗钱啊！所以我打算先从MVC的架构入手，先把整体架构搞清楚了。

 

Model数据模型

1.初始化

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    intNum++;
                    console.log("you have built " + intNum + " object");
                }
            });
            
            var intNum = 0;
            var stuA = new student();
            var stuB = new student();
        </script>
    </body>
</html>

结果

 

2.赋值，变量的设置与读取

注意set()和get()

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    //construct code
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"01",
                Name:"Larry",
                Score:"90"
            });
            console.log(stuA.get("Code"));
            console.log(stuA.get("Name"));
            console.log(stuA.get("Score"));
        </script>
    </body>
</html>

结果

 

3.定义函数

注意escape()

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    //construct code
                },
                
                printLog:function(){
                    console.log(this.get("Code"));
                    console.log(this.get("Name"));
                    console.log(this.get("Score"));
                    console.log(this.escape("Code"));
                    console.log(this.escape("Name"));
                    console.log(this.escape("Score"));
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"01",
                Name:"Larry",
                Score:"90"
            });
            stuA.printLog();
        </script>
    </body>
</html>

结果

 

 

4.事件监听

注意on()方法

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    this.on("change:Name",function(){
                        var oldname = this.previous("Name");
                        var newname = this.get("Name");
                        if(oldname != newname){
                            console.log(oldname + "," + newname);
                        }
                    });
                },
                defaults:{
                    Code:"",
                    Name:"Devin",
                    Score:""
                }
            });
            
            var stuA = new student();
            stuA.set("Name","Larry");
        </script>
    </body>
</html>

5.数据验证

开启数据验证

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    this.on("invalid",function(model,error){
                        console.log(error);
                    });
                },
                
                validate:function(attrs){
                    if(!_.isString(attrs.Name)){
                        return 'the name must be String';
                    }
                    if(!_.isNumber(attrs.Score)){
                        return 'the score must be Number';
                    }
                },
                
                defaults:{
                    Code:"10001",
                    Name:"Devin",
                    Score:"100"
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"10105",
                Name:12345,
                Score:600
            },{"validate":true});
            console.log(stuA.toJSON());
        </script>
    </body>
</html>

结果

将set()方法里的第二个参数的validate改为silent即可关闭数据验证

stuA.set({
    Code:"10105",
    Name:12345,
    Score:600
},{"silent":true});

 

6.删除数据

obj.unset(attrName) 删除指定名称的数据，删除属性

obj.clear() 清除对象中的全部数据

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    //construct code
                },
                
                defaults:{
                    Code:"10001",
                    Name:"Devin",
                    Score:100
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"10105",
                Name:"Larry",
                Score:600
            });
            
            //unset()
            stuA.unset("Name");
            console.log(stuA.get("Name"));
            console.log(stuA.toJSON());
            
            //previous
            stuA.set("Name",stuA.previous("Name"));
            console.log(stuA.toJSON());
            
            //clear()
            stuA.clear();
            console.log(stuA.toJSON());
        </script>
    </body>
</html>

结果

7.attributes属性

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    //construct code
                },
                
                defaults:{
                    Code:"10001",
                    Name:"Devin",
                    Score:100
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"10105",
                Name:"Larry",
                Score:600
            });
            
            //输出attributes对象
            console.log(stuA.attributes);
            
            //输出attributes的每一项
            var attrs = stuA.attributes;
            for(var i in attrs){
                console.log(i + ":" + stuA.attributes[i]);
            }
        </script>
    </body>
</html>

结果

 

8.previous()和previousAttributes()

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                initialize:function(){
                    //construct code
                },
                
                defaults:{
                    Code:"10001",
                    Name:"Devin",
                    Score:100
                }
            });
            
            var stuA = new student();
            stuA.set({
                Code:"10105",
                Name:"Larry",
                Score:600
            });
            
            console.log(stuA.toJSON());
            console.log(stuA.previousAttributes());
            
            console.log("====I am spliter=====");
            
            stuA.set({
                Code:"10106",
                Name:"Lucy",
                Score:602
            });
            console.log(stuA.toJSON());
            console.log(stuA.previousAttributes());
        </script>
    </body>
</html>

结果

 

除此之外，在Model中还有一些ajax方法和属性

save() 发送数据方法

wait属性 对发送数据进行有效性验证

fetch() 从服务器获取数据

destroy() 从服务器删除数据

 

Collection模型集合

我一直以为C是Controller的，但是在Backbone中C是Collection，说白了，Model只是一个数据模型，真正要量产复制的还是由Collection来完成。

 

一 创建集合对象

1.自定义集合对象

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:""
                }
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student
            });
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:"100"
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:"101"
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:"102"
                }
            ];
            
            var stus = new stuCollection(stuA);
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
        </script>
    </body>
</html>

结果

注意观察stus.models，在stus定义的时候，我们给这个collection装入了我们定义好的stuA这个对象数组，而这个collection的model又是我们之前定义好的student，所以stus的model为student，它的collection为stuA，我们用stus.models就可以访问到stuA的所有数据

2.实例化集合对象

我们可以换一种new的方式，不必定义Collection，直接在new的时候调用Backbone.Collection()方法就好，并在方法内指认model。

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:""
                }
            });
            
            //var stuCollection = Backbone.Collection.extend({
            //    model:student
            //});
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:"100"
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:"101"
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:"102"
                }
            ];
            
            var stus = new Backbone.Collection(stuA,{
                model:student
            });
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
        </script>
    </body>
</html>

结果

 

3.自定义集合方法

示例：筛选分数在400分以上的学生信息进行显示

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student,
                good:function(){
                    return this.filter(function(stu){
                        return stu.get("Score")>400;
                    });
                }
            });
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:100
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:500
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:500
                }
            ];
            
            var stus = new stuCollection(stuA);
            var stug = stus.good();
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            
            console.log("=====I am spliter=====");
            
            for(var i=0;i<stug.length;i++){
                console.log(stug[i].toJSON());
            }
        </script>
    </body>
</html>

结果

 

二 操作集合中模型对象

 

1.移除集合对象中的模型

obj.remove(models,options) 从指定的集合对象中移除一个或多个模型对象

obj.pop(options) 移除集合对象中最后一个模型对象

obj.shift(options) 移除集合对象中首个模型对象

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student
            });
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:100
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:500
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:500
                },
                {
                    Code:"10104",
                    Name:"Jeff",
                    Score:550
                },
                {
                    Code:"10105",
                    Name:"Lei",
                    Score:600
                }
            ];
            
            var stus = new stuCollection(stuA);
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.shift();
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.pop();
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.remove(stus.models[2]);
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
        </script>
    </body>
</html>

结果

 

2.添加集合对象中的模型

obj.add(models,options) 在集合对象的指定位置插入模型对象，如果没有指定位置i，默认为集合对象的尾部

obj.push(models,options) 向集合对象的尾部插入模型对象

obj.unshift(models,options) 向集合对象的头部插入模型对象

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student
            });
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:100
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:500
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:500
                }
            ];
            
            var newStu = [
                {
                    Code:"10104",
                    Name:"Jeff",
                    Score:550
                },
                {
                    Code:"10105",
                    Name:"Lei",
                    Score:600
                },
                {
                    Code:"10106",
                    Name:"Felix",
                    Score:530
                },
                {
                    Code:"10107",
                    Name:"Annie",
                    Score:530
                }
            ];
            
            var stus = new stuCollection(stuA);
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.unshift(newStu[1]);
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.add(newStu[0],{at:4});
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.push(newStu[2]);
            stus.push(newStu[3]);
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
        </script>
    </body>
</html>

结果

 

3.查找集合对象中的模型

obj.get(id) 通过id来查找(ID是在模型对象产生时生成的标志，用于与服务器保持同步的编号)

obj.at(index) 通过制定索引号获取集合中某一个模型对象

obj.findWhere(attrs) 查找与属性名称和属性值相配的第一个模型对象

obj.where(attrs,first) 查找与属性名称和属性值相配的第一个模型或多个模型对象(当first为true时只返回第一个)

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                },
                idAttribute:"Code"
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student
            });
            
            var stuA = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:100
                },
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:500
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:500
                },
                {
                    Code:"10104",
                    Name:"Jeff",
                    Score:550
                },
                {
                    Code:"10105",
                    Name:"Lei",
                    Score:600
                },
                {
                    Code:"10106",
                    Name:"Felix",
                    Score:530
                },
                {
                    Code:"10107",
                    Name:"Annie",
                    Score:530
                }
            ];
            
            var stus = new stuCollection(stuA);
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====search result=====");
            
            var result = stus.get(10106);
            console.log(result);
            console.log("=====I am get spliter=====");
            
            result = stus.at(3);
            console.log(result);
            console.log("=====I am at spliter=====");
            
            result = stus.findWhere({Score:500});
            console.log(result);
            console.log("=====I am findWhere spliter=====");
            
            result = stus.where({Score:500});
            console.log(result);
            console.log("=====I am where spliter=====");
        </script>
    </body>
</html>

结果

4.集合中模型对象的排序

obj.sort(options) 必须在实例化集合对象时添加一个名为"comparator"的方法，以此来规定排序规则。

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
    </head>
    <body>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                },
                idAttribute:"Code"
            });
            
            var stuCollection = Backbone.Collection.extend({
                model:student,
                comparator:function(model_1,model_2){
                    var compResult = model_1.get('Score')>model_2.get('Score');
                    return compResult?0:1;
                }
            });
            
            var stuA = [
                {
                    Code:"10102",
                    Name:"Devin",
                    Score:500
                },
                {
                    Code:"10104",
                    Name:"Jeff",
                    Score:550
                },
                {
                    Code:"10103",
                    Name:"Lucy",
                    Score:500
                },
                {
                    Code:"10107",
                    Name:"Annie",
                    Score:530
                },
                {
                    Code:"10105",
                    Name:"Lei",
                    Score:600
                },
                {
                    Code:"10106",
                    Name:"Felix",
                    Score:530
                },
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:800
                }
            ];
            
            var stus = new stuCollection(stuA);
            
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
            console.log("=====I am spliter=====");
            
            stus.sort();
            for(var i=0;i<stus.models.length;i++){
                console.log(stus.models[i].toJSON());
            }
        </script>
    </body>
</html>

结果

三 与服务器交互集合中的模型对象

fetch() 从服务器获取数据

create() 与服务器同步数据

 

 

View视图

Model和Collection都属于底层的数据处理，真正与页面交互的是View。

View的核心功能是处理数据业务逻辑，绑定DOM元素事件，渲染模型或集合数据。

 

一 视图基础

在定义一个视图对象之前，需要构建一个视图类

在构建类时，可以设置el属性关联DOM中的元素

也可以指定与视图相关的模型或集合类名，实现各个类之间对象的数据互访问

 

1.定义视图对象

记得先引入jQuery，我们在做DOM操作的时候会使用到jQuery

注意render()方法的写法和用法

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            .test{color:red;}
        </style>
    </head>
    <body>
        <script>
            var testView = Backbone.View.extend({
                id:"show",
                className:"test",
                render:function(content){
                    this.el.innerHTML = content;
                    document.body.appendChild(this.el);
                }
            });
            
            var test = new testView();
            test.render("Hello,World!");
        </script>
    </body>
</html>

结果

可以看到在DOM上生成了节点，id和class都是我们用代码动态添加上去的

 

2.视图对象访问模型对象

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            .test{color:red;}
        </style>
    </head>
    <body>
        <div id="show" class="test"></div>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stus = new student({
                Code:"10101",
                Name:"Larry",
                Score:750
            });
            
            var stusView = Backbone.View.extend({
                el:"#show",
                render:function(){
                    this.el.innerHTML = JSON.stringify(this.model);
                }
            });
            
            var stuv = new stusView({model:stus});
            stuv.render();
        </script>
    </body>
</html>

结果

 

3.视图对象访问集合对象

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            .test{color:red;}
        </style>
    </head>
    <body>
        <div id="show" class="test"></div>
        <script>
            var stuModel = [
                {
                    Code:"10101",
                    Name:"Larry",
                    Score:750
                },
                {
                    Code:"10102",
                    Name:"Felix",
                    Score:600
                },
                {
                    Code:"10103",
                    Name:"Devin",
                    Score:550
                }
            ];
            
            var stuList = new Backbone.Collection(stuModel);
            
            var stuView = Backbone.View.extend({
                el:"#show",
                render:function(){
                    var curlist = this.collection.models;
                    for(var i=0;i<curlist.length;i++){
                        this.el.innerHTML += JSON.stringify(curlist[i]) + "<br />";
                    }
                }
            });
            
            var stuv = new stuView({collection:stuList});
            stuv.render();
        </script>
    </body>
</html>

结果

 

二 视图中的模板

 

1.处理逻辑的模板

<%= %>　区域内的变量会在调用模板时被以字典方式传入的对应值所取代。支持简单的JS语句

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:14px;}
            div{width:260px; padding:5px;}
        </style>
    </head>
    <body>
        <div id="score"></div>
        <script type="text/template" id="score-tpl">
            <%= score > 600 ? "good job":"just so so" %>
        </script>
        <script>
            var stuView = Backbone.View.extend({
                el:$("#score"),
                initialize:function(){
                    this.template = _.template($("#score-tpl").html());
                },
                render:function(pscore){
                    this.$el.html(this.template({score:pscore}));
                }
            });
            
            var stuv = new stuView();
            stuv.render(600);
        </script>
    </body>
</html>

结果

 

 2.显示多项内容的模板

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:12px;}
            ul{list-style-type:none; padding:0; margin:0;}
        </style>
    </head>
    <body>
        <ul id="ulshowstus"></ul>
        <script type="text/template" id="stus-tpl">
            <li>Code:<%=Code %></li>
            <li>Name:<%=Name %></li>
            <li>Score:<%=Score %></li>
        </script>
        <script>
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stus = new student({
                Code:"10101",
                Name:"Larry",
                Score:750
            });
            
            var stuView = Backbone.View.extend({
                el:$("#ulshowstus"),
                initialize:function(){
                    this.template = _.template($("#stus-tpl").html());
                },
                render:function(){
                    this.$el.html(this.template(this.model.toJSON()));
                }
            });
            
            var stuv = new stuView({model:stus});
            stuv.render();
        </script>
    </body>
</html>

结果

 

3.自定义模板变量标记

我们可以使用{{}}标记来代替%

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:12px;}
            ul{list-style-type:none; padding:0; margin:0;}
        </style>
    </head>
    <body>
        <ul id="ulshowstus"></ul>
        <script type="text/template" id="stus-tpl">
            <li>Code:{{Code}}</li>
            <li>Name:{{Name}}</li>
            <li>Score:{{Score}}</li>
        </script>
        <script>
            _.templateSettings = { interpolate:/\{\{(.+?)\}\}/g };
            
            var student = Backbone.Model.extend({
                defaults:{
                    Code:"",
                    Name:"",
                    Score:0
                }
            });
            
            var stus = new student({
                Code:"10101",
                Name:"Larry",
                Score:750
            });
            
            var stuView = Backbone.View.extend({
                el:$("#ulshowstus"),
                initialize:function(){
                    this.template = _.template($("#stus-tpl").html());
                },
                render:function(){
                    this.$el.html(this.template(this.model.toJSON()));
                }
            });
            
            var stuv = new stuView({model:stus});
            stuv.render();
        </script>
    </body>
</html>

结果

 

三 视图中的元素事件

 

1.视图中简单事件绑定

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:12px;}
            div{width:260px;text-align:center;padding:5px;}
            .changed{border:solid 1px #555;}
        </style>
    </head>
    <body>
        <script>
            var stuView = Backbone.View.extend({
                el:$("body"),
                initialize:function(){
                    this.render();
                },
                render:function(){
                    this.$el.append('<div id="backbone">Hello,World!</div>');
                },
                events:{
                    "click div#backbone":"togcls"
                },
                togcls:function(){
                    $("#backbone").toggleClass("changed");
                }
            });
            
            var stuv = new stuView();
        </script>
    </body>
</html>

结果

点击前

点击后

 

2.绑定视图模板的多个事件

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:12px;}
            div{width:260px;text-align:center;padding:5px;}
            .changed{border:solid 1px #555;}
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script type="text/template" id="main-tpl">
            <div id="backbone"><%=mess%></div>
            <input id="btnshow" type="button" value="click me" />
        </script>
        <script>
            var stuView = Backbone.View.extend({
                el:$("#main"),
                initialize:function(){
                    this.template = _.template($("#main-tpl").html());
                    this.render();
                },
                render:function(){
                    this.$el.html(this.template({ mess:"Hello,World!" }));
                },
                events:{
                    "click div#backbone":"togcls",
                    "click input#btnshow":"toggle"
                },
                togcls:function(){
                    $("#backbone").toggleClass("changed");
                },
                toggle:function(){
                    $("#backbone").toggle();
                }
            });
            
            var stuv = new stuView();
        </script>
    </body>
</html>

结果

button被点击前

button被点击后

 

3.动态绑定和取消视图中的事件

delegateEvents() undelegateEvents()

<!DOCTYPE html>
<html>
    <head>
        <script src="./js/jquery-1.11.3.min.js"></script>
        <script src="./js/underscore-1.8.2-min.js"></script>
        <script src="./js/backbone-1.1.2-min.js"></script>
        <style>
            body{font-size:12px;}
            div{width:260px;text-align:center;padding:5px;}
            .changed{border:solid 1px #555;}
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script type="text/template" id="main-tpl">
            <div id="backbone">Hello,World!</div>
            <input id="btn_a" type="button" value="change style" />
            <input id="btn_b" type="button" value="cancel bind" />
            <input id="btn_c" type="button" value="rebind" onclick="stuv.rebind()" />
        </script>
        <script>
            var stuView = Backbone.View.extend({
                el:$("#main"),
                initialize:function(){
                    this.template = _.template($("#main-tpl").html());
                    this.render();
                },
                render:function(){
                    this.$el.html(this.template());
                },
                rebind:function(){
                    this.delegateEvents(this.events);
                },
                events:{
                    "click input#btn_a":"btnclick_a",
                    "click input#btn_b":"btnclick_b"
                },
                btnclick_a:function(){
                    $("#backbone").toggleClass("changed");
                },
                btnclick_b:function(){
                    this.undelegateEvents();
                }
            });
            
            var stuv = new stuView();
        </script>
    </body>
</html>

 

 

 

 

 

Backbone的笔记就到这里了，在学习的过程当中我发现，Backbone中模板的写法和Handlebars有点像，发现越来越喜欢Backbone了！

以上所有代码示例均来自《Backbone.js实战》 陶国荣著 机械工业出版社

虽然不是我的原创，但是代码是我一行一行手打出来的，每一个示例都亲自测试，调试，每一个结果都是我自己运行后截图上传上来的，如果有人转载，请您标注一下出处。

我的很多博文也是摘抄自很多地方的，我都会在页尾标明文章来源。

总结的好辛苦啊！但是我相信这辛苦一定值得！

 

 

 

 

 

参考文章：

http://www.cnblogs.com/yexiaochai/archive/2013/07/27/3219402.html

http://www.css88.com/doc/backbone/

转载于:https://www.cnblogs.com/zcynine/p/5158216.html

aizhanqian5077
关注
【YOLOv8改进】MobileNetV3替换Backbone (论文笔记+引入代码)
专注于图像领域，主要研究内容包括计算机视觉和深度学习，特别是在图像分类、目标检测和图像生成等方面有深入的研究和实践经验。
03-20 2120
文章介绍了基于互补搜索技术组合以及新颖架构设计的MobileNets下一代，MobileNetV3。通过结合硬件感知的网络架构搜索（NAS）和NetAdapt算法，MobileNetV3针对手机CPU进行了优化，随后通过新颖的架构进步得到了改进。本文开始探索自动化搜索算法和网络设计如何共同作用，以利用互补方法提升整体艺术状态。通过这一过程，我们创建了两个新的MobileNet模型以供发布：面向高资源和低资源使用案例的MobileNetV3-Large和MobileNetV3-Small。
CNN backbone 总结笔记
Francis Liu
12-20 4074
算是一篇梳理backbone的总结笔记，前面部分不少内容都是照搬 reference 2 的，稍微总结了一下里面的内容，后面增加了其中遗漏的以及今年新出的网络（FPN，Hourglass，ResNeXt，DCN，DPN，SENet，MobileNet v3），用了很多网图，联系侵删； Reference: 1.https://arxiv.org/pdf/1908.03673.pdf，19年...
经典网络骨架：Backbone 学习笔记（一）——卷积网络的基本构成
qq_46555222的博客
07-25 830
当前的物体检测算法虽然各不相同，但第一步通常是利用卷积神经网络处理输入图像，生成深层的特征图，然后再利用各种算法完成区域生成与损失计算，这部分卷积神经网络是整个检测算法的“骨架”，也被称为Backbone。
Backbone Events 源码笔记
apr40151的博客
07-05 137
用了backbone一段时间了,做一些笔记和总结,看的源码是1.12 backbone有events,model,collection,histoty,router,view这些模块,其中events是最基础的,其他的模块的prototype全部都扩展了他,所以events是非常重要的,真的很重要,还好代码比较简单,也比较好理解 这个里面的代码是从backbone里面剥离出来,...
华为网络技术基础笔记 2023-2024
ZiminLi的博客
09-27 831
①首先 第一个十进制数是 10，A类地址，自然掩码是 255.0.0.0，当前（子网）掩码是255.255.255.0，该IP地址是 子网划分后的地址。匹配条目 或者 数据的目的MAC是FF-FF-FF-FF-FF-FF（广播），数据会从其它所有端口（除了收到数据的端口）发出去。交换机某个端口收到数据，数据的目的MAC在MAC地址表有匹配条目，且该条目中的端口是 另一个，数据最终从 另一个端口发送出去。发送方-----------路由器A-----------路由器B-----------接收方。
HCIP笔记
w283065的博客
11-30 1626
排序----一个数据段被分为多个数据包，从不同路径进行传输，最终达到目的地的顺序被打乱，需要重新排组。重传----超时重传，当一个数据段中的某一个数据报文丢失，会要求重新传输丢失的报文。流控---滑动窗口-----通过调节窗口大小(无需等待确认就可以连续发送的数据的最大量)来对流量的流速进行控制。[r2-GigabitEthernet0/0/0]arp-proxy enable ----开启ARP代理功能。VLSM -- 可变长子网掩码 -- 子网划分，将原来的一个大的广播域逻辑的划分为若干个小的广播域。
Backbone.js 学习笔记教程
gitblog_00137的博客
08-15 571
Backbone.js 学习笔记教程 backbonejs-learning-notebackbonejs学习笔记更新版，使用backbone1.1.0项目地址:https://gitcode.com/gh_mirrors/ba/backbonejs-learning-note 项目介绍 backbonejs-learning-note 是一个关于 Backbone.js 的学习笔记项目，由 t...
【小本本笔记】backbone，neck，head，anchor free/based，centerness
2301_80365008的博客
08-10 907
在目标检测任务中，backbone 提取的特征会通过 neck 进行处理和增强，然后由 head 进行最终的预测（如边界框回归和类别分类）。问题在于为推理而累积计算的均值和方差在不同Head之间摇摆，这个均值和方差是个“四不像”，然后在推断的时候，所有的共享Head都。这种方法可能导致模型在训练和推理时的复杂度较高，因为检测头的性能和特征提取网络的质量紧密相关。分类分支出来的概率，其实表征的是一种object ness的程度，但object ness的score高并不能表示他预测的bbox质量就好。
MMSegmentation笔记
985小菜鸡
07-10 598
这里可以选择mmsegmentation/configs/目录下的不同模型进行实验，这里以unet为例，我创建的这个文件代码如下：可以看到，_base_定义了模型配置，数据集配置，调度策略配置，运行时配置。然后也定义了裁剪大小，数据预处理。_base_ = [
Backbone.js框架中简单的View视图编写学习笔记
10-22
在Backbone.js中，View是MVC模式中的一个重要组成部分，它负责管理用户界面与模型数据之间的交互。在本文中，我们将深入探讨如何在Backbone.js中...学习和掌握这些基础知识，对于开发复杂的JavaScript应用至关重要。
人工智能学习与实训笔记（一）：零基础入门学习与实训笔记
weixin_45512098的博客
07-26 769
基于百度飞桨的人工智能学习笔记
【代码研读】Mask RCNN代码阅读笔记（二）骨架网络backbone和入口
云端筑梦师
10-09 2335
前言 笔记分为三个部分，backbone，rpn,roi_head三个部分，之前的项目总览见【链接】。本文主要是讲解backbone部分的文件，通过在总体把握和实现细节两个方面对其进行记录。 │ │ ├── detector │ │ │ ├── detectors.py #检测的代码入口 │ │ │ ├── generalized_rcnn.py #生成各种组合的...
解决@ant-design-vue/nuxt模块加载到许多没用到的组件，影响开发下加载速度的问题
清晰编程
11-12 62
升级命令：npm up @ant-design-vue/nuxt。解决方法：将该模块版本升级到1.4.6。
Javascript中Map与Set以及其常见遍历方式
警警的博客
11-12 550
在JavaScript中，Map和Set是两种非常重要的集合类型，它们提供了比传统对象（Object）和数组（Array）更强大和灵活的数据存储和操作方法。下面是对Map和Set的详细解释。
vue2面试题5|[2024-11-08]
m0_49474690的博客
11-08 955
关于vue2API的面试题
Vue中的常用指令
最新发布
m0_62388400的博客
11-12 713
指令（Directives）是 Vue 提供的带有的 特殊 标签。为啥要学：提高程序员操作 DOM 的效率。vue 中的指令按照不同的用途可以分为如下 6 大类：内容渲染指令（v-html、v-text）条件渲染指令（v-show、v-if、v-else、v-else-if）事件绑定指令（v-on）属性绑定指令 （v-bind）双向绑定指令（v-model）列表渲染指令（v-for）指令是 vue 开发中最基础、最常用、最简单的知识点。
Echarts 折线图
weixin_44443380的博客
11-08 262
解决方法：设置emphasis.lineStyle和折线图本身lineStyle相同即可。问题：鼠标悬停在折线图上，折线变粗。3、去掉 hover 折线变粗方法。
每天10个vue面试题(九)
不熬夜的臭宝的博客
11-08 617
一天10个vue面试题喽！
Electron + Vue3 开发桌面应用+附源码
m0_47483157的博客
11-08 940
Electron 是一个使用 JavaScript、HTML 和 CSS 构建跨平台桌面应用程序的框架。它由 GitHub 开发并维护，允许开发者使用现代 Web 技术创建原生应用程序。Electron 结合了 Chromium 渲染引擎和 Node.js 运行时环境，使得开发者可以在同一个项目中同时利用前端和后端的技术栈。Electron 主要特点跨平台：一次编写，可在 Windows、macOS 和 Linux 上运行。
Backbone.js基础到高级实战教程
"Backbone-Tutorials基础教程，由Thomas Davis撰写，涵盖了初学者、中级和高级内容，提供简单示例和易于理解的JavaScript基础教程。" 在深入探讨Backbone.js之前，我们先了解一下为什么需要它。Backbone.js是一个轻...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值