backbone测试代码

一、入门测试

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>

//一、创建对象
//var model=new Backbone.Model();
//var models=new Backbone.Collection();
//var view=new Backbone.View();


//二、调用model中set和get方法
//var model=new Backbone.Model();
//model.set('title','lili');
//var aa=model.get('title');
//alert(aa);


//三、调用collection中add方法
var model01=new Backbone.Model({'name':'lili'});
var model02=new Backbone.Model({'name':'haha'});
var models=new Backbone.Collection();
models.add(model01);
models.add(model02);
alert(JSON.stringify(models));


</script>
</head>

<body>
</body>
</html>

二、backbone继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>

//一、扩展一个实例化方法和一个构造方法，其中extend第一个参数是实例化方法，第二个方法是构造方法
//var M=Backbone.Model.extend({
//    aa:function (){
//        alert(123);
//    }
//},{
//    bb:function (){
//        alert(456);
//    }
//});
//
//var AA=new M(); //调用实例化方法必须先实例化出来
//AA.aa();
//M.bb();


//二、扩展一个方法并用model中参数调用
//var M=Backbone.Model.extend({
//    defaults:{             //注意此处是json格式
//        'name':'lili'
//    }
//});

//二次继承
var M=Backbone.Model.extend({
    aa:function(){alert(123)}
});
var AA=M.extend(); //调用实例化方法必须先实例化出来
var test=new AA();
test.aa();
</script>
</head>

<body>
</body>
</html>

三、自定义事件以及触发

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script>

//一、触发自定义事件
//var M=Backbone.Model.extend({
//    defaults:{'name':'lili'},
//    initialize:{  //初始化构造函数
//        this.on('change',function(){  
//            alert("默认参数被改变");
//        })
//    }
//})
//var m=new M();
//m.set('name','haha');


//二、触发自定义事件中固定属性
//var M=Backbone.Model.extend({
//    defaults:{'name':'lili'},
//    initialize:function(){
//        this.on('change:name',function(model){
//            alert("默认参数被改变");
//            console.log(model)
//        })
//    }
//})
//var m=new M();
//m.set('name','haha');


//三、view和MVC模式
$(function(){
    var M=Backbone.Model.extend({
        defaults:{'name':'lili'},
    });
    var V=Backbone.View.extend({
        initialize: function() {
        this.listenTo(this.model, "change", this.render);
      },
      render: function() {
        alert("默认参数被改变");
      }
    });
    var m=new M();
    var v=new V({model:m});
    m.set('name','hahah')
})
</script>
</head>

<body>
</body>
</html>

四、传给服务器值和从服务器获取值

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//1.将数据或者更新的数据保存到服务器上
//    Backbone.sync=function(method,model){
//        alert(method + ": " + JSON.stringify(model));
//    model.set('id', 1);
//    }
//    var M=Backbone.Model.extend({
//        defaults:{
//            'name':'lili',
//        },
//        url:'/user'     //此处一定要写服务器地址
//    });
//    var m=new M();
//    m.save();
//    m.save('name','haha');

//2.从服务器上获取数据,一般都是从集合中取值,等从服务器取值完毕后,开始渲染页面
Backbone.sync=function(method,model){
        alert(method + ": " + JSON.stringify(model));
    model.set('id', 1);
}
var C=Backbone.Collection.extend({
    initialize:function(){
        this.on('reset',function(){  //从服务器获取完毕后会执行此函数，但是本测试中url是假连接
            alert("从服务器拉取值完毕");
        })
    },
    url:'/user',
})
var c=new C();
c.fetch();

</script>
</head>
<body>
</body>
</html>

五、Backbone路由和历史管理

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    //适用于单页面跳转
    var W=Backbone.Router.extend({
        routes: {
        "help":                 "help",    // #help
        "search/:query":        "search",  // #search/kiwis
        "search/:query/p:page": "search"   // #search/kiwis/p7
      },
    
      help: function() {
        alert("您打开的是help");
      },
    
      search: function(query, page) {
        alert("您打开的是search");
      }
    });
    var w=new W();
    Backbone.history.start();//此处必须开启Backbone的路由历史管理
</script>
</head>
<body>
</body>
</html>

六、事件委托

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
    var V=Backbone.View.extend({
        el:$('body'),
        events:{   //通过event进行事件委托
            'click a':'aaa',
            'mouseover li':'bbb',
        },
        aaa:function(){
            alert("a标签被点击了");
        },
        bbb:function(){
            alert("li标签被鼠标悬浮了");
        }
    });
    var v=new V();
})
</script>
</head>
<body>
<a href="javascript:">我是a标签</a>
<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>
</body>
</html>

七、前端模板

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/underscore-min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/backbone-min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//前端模板：主要是控制JS与html分离
//1.js与html混合代码如下:
//$(function(){
//
//    var M = Backbone.Model.extend({
//        defaults : {
//            name : 'hello'
//        }
//    });
//    
//    var V = Backbone.View.extend({
//            
//        initialize : function(){
//            
//            this.listenTo( this.model , 'change' , this.show );
//            
//        },
//        show : function(model){
//            $('body').append( '<div>'+ model.get('name') +'</div>' );
//        }
//        
//    });    
//    
//    var m = new M;
//    var v = new V({model:m});
//    m.set('name','hi');
//
//});

//2.JS与html分离代码如下(需配合body中template)：
$(function(){

    var M = Backbone.Model.extend({
        defaults : {
            name : 'hello'
        }
    });
    
    var V = Backbone.View.extend({
            
        initialize : function(){
            
            this.listenTo( this.model , 'change' , this.show );
            
        },
        show : function(model){
            $('body').append( this.template(this.model.toJSON()) );
        },
        template:_.template($("#template").html()),    //此处用的是underscoreJS里面的_.template方法
        
    });    
    
    var m = new M;
    var v = new V({model:m});
    m.set('name','hi');

});
    

</script>
</head>
<body>
    <!--<script type="text/template" id="template">
        <div><%=name%></div>
    </script>-->
    <script type="text/template" id="template">
        <%var i=0;
        for(i=0;i<=3;i++){%>
            <div><%=name%></div>
        <%}%>
        
    </script>
</body>
</html>
个性签名：别低头，王冠会掉，别后退，梦想会碎~~~~~
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lily1010/p/5436638.html