backbone学习

backbone里很多思想都与后台有关,如果有后台语言基础的学习起来比较简单。

它是一个MVVM模型,因为我觉得前端MVVM,比MVC好理解,虽然它也是MVC,但

C的概念很模糊,因为前端mvc的c很不好理解,但mvvm就很简单。

backbone很多方法都要自己new,就像你做了个模子,然后不断的印出你要的样子。

backbone-Model

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>

    <script>

    /* Backbone.Model.extend() 继承了Backbone.Model()
    Backbone.Model.extend()  相当于创建一个类   然后new 实例化
    传入的对象属性会存放在attributes里
    */
    var Note=Backbone.Model.extend({
        defaults:{title:"默认值"},
        initialize:function(){
            console.log("创建一个记录:"+this.get("title"));
            this.on("change:title",function(m,opt){
                console.log("m:");
                console.log(m);
                console.log("opt:");
                console.log(opt);
                console.log("change");
            });
            this.on("invalid",function(m,err){
                console.log(err);
            });
        },
        validate:function(attrs,options){
            /*console.log(attrs);
            console.log(options);*/
            if(attrs.title.length<3){
                return "哈哈";
            }
        }
    });
    var note1=new Note({"title":"zhang"});
    /*都是对于属性操作的*/
    /*
    增删查改
    set(),unset(),has(),set()
    获取
    get()
    默认值
    defaults
    Backbone.Model.extend({defaults:{...}})
    初始化
    initialize
    监听事件 on()
    有change  this.on("change",function(model,option){})
                this.on("change:title",function(){})
    验证:
    validate
    在属性改变时加上{validate:true} 开启验证
    返回错误信息

    监听错误信息
    invalid
     */

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

backbone-view

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>

        <!--
            underScore 库的html模板
            _.template(html)
            传入对象{...}
            变量为key
            变量获取使用 <% = 变量 %>
            类似jsp
        -->

    <script type="text/template" id="list1">
    <ul>
        <p><%= txt %></p>
        <small><%= name %></small>
    </ul>
    </script>

    <script>
    var Model=Backbone.Model.extend();
        /*
        视图 BackBone.view.extend()
         html模板
         tagName
         className
         attributes
         */
        var viewNode=Backbone.View.extend({
            "tagName":"p",
            "className":"txt",
            attributes:{
                "data-id":"txt"
            },
            template:_.template($("#list1").html()),
            render:function(){
                this.$el.html(this.template(this.model.attributes));
                $("body").append(this.el);
            }
        });
        var m=new Model({name:"张志成",txt:"一二三四五"});
        var view1=new viewNode({model:m});
        view1.render();
        /*
        el 属性
        $el jq对象
        render() 渲染html,即调用对象中的render函数
         */

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

backbone-collection

这个要说说,如果有java基础的很好理解,就是集合,方便操作数据的集合。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>

    <script>
    var Note=Backbone.Model.extend({
        initialize:function(){
            console.log("创建Model:"+this.get("id"));
        }
    });
    var note1=new Note({txt:"一天",id:"a"});
    var note2=new Note({txt:"二天",id:"b"});
    var note3=new Note({txt:"三天",id:"c"});
    /*集合  与java类似*/
    /*增删改查
    add 在没有设置{"merge":true}时,虽然添加过但不会真正添加到里面去
    但可以监听到
    {at:index}
    {at:1}
    就是手动设置索引号,这样可以设置添加的位置
    remove
    remove(note1)
    reset
    重新定义集合
    pop
    删除最后一个
    shift
    删除第一个
    push
    unshift

    */
    var Collection=Backbone.Collection.extend({model:Note,
        initialize:function(){
            this.on({
                add:function(model,c,opts){
                    console.log("add");
                },
                remove:function(model,c,opts){
                    console.log("remove");
                },
                change:function(model,opts){
                    console.log("change");
                }
            });
        }});
    var c=new Collection([note1,note2,note3]);
        c.add({id:"a",ccc:"sasa"},{"merge":true});
        //c.remove(note3);
        /*set
            可以把存在的模型就会合并,
            不存在就添加
            如果不想删除set没有传进来的,可以设置{remove:false}
        */
    /*
        获取集合
        从ID get(index)
        从索引 at(index)
     */
    </script>
</body>
</html>

backbone-view-model-collection-route

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="jquery.js"></script>
    <script src="./backbone/underscore.js"></script>
    <script src="./backbone/backbone.js"></script>
</head>
<body>
    <div id="container"></div>
    <script type="text/template" id="temp">

            <span><%= id %></span>
            <span><%= name %></span>
            <p><%= txt %></p>

    </script>
    <script>
    /*增删可以对collection进行操控
        改可以对model进行操控
        on监听的第三个参数是指向,就是上下文环境
    */
    var Model=Backbone.Model.extend({
        initialize:function(){
            this.on("change",function(model,opts){});
        }
    });
    var Collection=Backbone.Collection.extend({model:Model});
    var UlView=Backbone.View.extend({
        tagName:"ul",
        className:"ul",
        attributes:{},
        initialize:function(){
            //$("#container").append(this.el);
            this.collection.on("add",this.addOne,this);
            this.render();
        },
        addOne:function(m){
            //console.log(m);
            var vView=new LiView({model:m});
            this.$el.append(vView.render().el);
        },
        render:function(){
            this.collection.each(this.addOne,this);
            return this;
        }
    });
    var LiView=Backbone.View.extend({
        tagName:"li",
        className:"li",
        template:_.template($("#temp").html()),
        initialize:function(){
            this.model.on("change",this.change,this);
        },
        change:function(m){
            this.render();
        },
        render:function(){
            this.$el.html(this.template(this.model.attributes));
            return this;
        }
    });
    var note1=new Model({"id":"a","txt":"哈哈","name":"张志成"});
    var note2=new Model({"id":"b","txt":"哈哈aaa","name":"张志成"});
    var note3=new Model({"id":"c","txt":"哈哈vvv","name":"张志成"});
    var c=new Collection([note1,note2]);
    var view=new UlView({collection:c});
    /*路由*/
    /*:变量,会返回给指定函数
        可选性输入(...)
        *是随意长度路径,会把*的路径返回出来
        navigate是跳转,但不在历史记录里,设置trigger就是可以有了

    */
    var Route=Backbone.Router.extend({
        routes:{
            "a(/page/:id)":"index",
            "a/:id":"show",
            "login(/form/*form)":"login"},
            login:function(form){
                console.log(form);
                console.log("请先登录。。。");
            },
        index:function(id){
            console.log("index"+id);
            if(id){
                this.show(id);
                return ;
            }
            $("#container").append(view.el);
        },
        show:function(id){
            this.navigate("/login/form/a/"+id,{trigger:true});
            var m=c.get(id);
            console.log(m);
            var v=new LiView({model:m});
            $("#container").html(v.render().el);
        }
    });
    var r=new Route();
    /*监听hashchange,就是操作历史管理*/
    Backbone.history.start();

    /*fetch  需要后台php框架配合实现直接返回集合,collection.fetch()会发送ajax,返回集合*/
    /*使用一整套backbone框架可以实现从前端到后台的结合*/
    /*使用chrome 插件postman 可以很方便看到数据的返回*/
    </script>
</body>
</html>

这就是基本的backbone知识,一门框架,基础知识懂了,后面各种使用方法由api补充就很快速理解这门框架了。

基础才是王道。

工作中很多东西都是要扎实的基础,然后才能快速找到问题,解决问题。

时间: 2024-10-13 00:49:48

backbone学习的相关文章

Backbone学习笔记一Backbone中的MVC

原文章地址http://bigdots.github.io/2015/12/01/Backbone学习笔记(一)/#more Backbone.js为复杂WEB应用程序提供模型(models).集合(collections).视图(views)的结构.其中models用于绑定键值数据和自定义事件:collections附有可枚举函数的丰富API: views可以声明事件处理函数,并通过RESRful JSON接口连接到应用程序. 下面通过实例来学习backbone的MVC.实例来自http://

Backbone学习笔记

MVC 爱创课堂今日分享-Backbone学习笔记 M表示模型V表示视图C表示控制器MVC最早出现在smalltalk语言中,MVC分别表示模型,视图,控制器,模型通常指的是数据,视图通常是它能看到的页面,控制器通常表示一些交互等等,MVC根据前后端的划分,又有不同的含义对于后端来说M(Model)模型,通常指的是底层的数据,例如对数据库操作数据的封装等V(View)视图,向前端输出的视图等等,包括渲染视图,创建视图等等C(Controller)控制器,指的是对模型以及视图的操作,例如获取请求,

backbone学习时练习的简单示例

现在js MVC模式大行其道,像backbone,angularjs都是一个好的jsMVC框架.在学习backbone时,看了一下todo示例,写了一个简单的增删改查的示例,其中用到bootstrap做界面.练习一下! 列表页面 新增或修改页面 1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta charset="utf-8"> 5 <meta htt

Backbone学习日记第二集——Model

看到Model给我的第一感觉就是实体,以前大学的时候学习.Net 三层架构的时候经常和Model打交道,现在工作中用到ASP.NET MVC中的M也是Model,嗦很自然的就想这个Model和他们之间相连接起来,但是又有些许不同,比如backbone中的Model.controller.View都在同一个文件中,而.net中的M是单独的一个或多个类文件.在backbone中要构建一个Model很简单,只需要继承一下Model就搞定,比如:var model=Backbone.Model.exte

Backbone学习日记第一集——hello backbone

由于工作项目的需要用到backbone.js这个MVC框架,所以前段时间一直在网上收集了好久资料,但是都没什么好一点的,偶然间发现了www.the5fire.com网站上有backbone全套的教程,于是又当回剁手族买了本电子书,但是诸多原因一直没怎么看,今天在公交车上无聊,翻了翻手机突然想起来了这本书,在车上看了2个章节,还不错,有激起了我对他的学习欲望,回到家就迫不及待的收拾完家务,开始code. 下面是我今天晚上照着例子写了一个hello Backbone的Demo 1 <!DOCTYPE

Backbone 学习笔记

Backbone 是一款基于模型-视图-控制器 MVC 模式的轻量级javascript 框架 ,可以用来帮助开发人员创建单页Web应用. 借助Backbone 我们可以使用REST的方式来最小化客户端和服务器间的数据传输,从而实现了更快加速的Web页面更新. 能心静下来学习了,以前以为Backbone 是一座高山用起来很难,结果只是学了2天就有一些新的,实在让人开心. 我整理了一下整个BackBone的学习记录在我的GIT里面,大部分事件都有例子并且有详细的注解和解释,结合require.js

Backbone学习笔记 - View篇

Backbone是一种Web端的MVC框架,这里纪录学习Model,View和Collection的笔记. 1 View initialize构造函数 Backbone.View 与jQuery库紧密结合. var SearchView = Backbone.View.extend({ initialize:function(){ alert("Alerts suck."); } }); var search_view = new SearchView(); initialize 就类

Backbone学习日记[2]:后台(php)接收前端数据并保存

一.前端定义一个模型,设置一个url,指向提供保存数据功能的后台文件,给模型设置一个默认值:实例化模型,调用save方法: <script type="text/javascript" src="jquery.min.full.js"></script> <script type="text/javascript" src="Underscore.js"></script> &l

Backbone学习记录(6)

路由 backbone将路由规则和一个方法名绑定到一起,来控制单页的hash,以及单页的前进后退. var UserRouter = Backbone.Router.extend({ routes: { "": "main", "help": "help", // #help "search/:query": "search", // #search/page "search/