通过helloworld来认识下backbone

Backbone主要涉及3部分:model,collection和view。而这个框架的优势在于:数据与视图分离,通过操作model来自动更新view。

根据我的个人经验,直接写个简单的例子是最最直观的,那么从hello world开始吧!

程序目标:创建人员,将人员添加入队伍,删除人员,清空队列。
通过helloworld来认识下backbone
步骤1. model,理解成一个数据个体。

var People = Backbone.Model.extend({

    //每个人都有他自身的属性

    defaults : {

        "name" : '阿三'

    }

});

 

步骤2. collection,理解成数据队列。

var Peoples = Backbone.Collection.extend({

    //对集合的类型进行设定,这里设定为人的集合

    model : People

});

 

步骤3. view,每个伟大的视图背后,都有默默的collection或者model。

var View = Backbone.View.extend({

    //设定这个视图的dom元素,也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定,Backbone会为它套上空的div标签

    el : $("body"),

    initialize : function() {

        //集合的事件绑定

        this.collection.bind("add", this.addOne);

        this.collection.bind("remove", this.delOne);

    },

    //使用了jquery的on方法,提供对视图的事件代理

    events : {

        "click #add" : "add",

        "click .del" : "del",

        "click #clear" : "clear",

    },

    add : function() {

        var name = prompt("请输入人名");

        //创建一个新model

        var people = new People({

            'name' : name

        });

        //并添加到人员队列中,会触发collection的add事件

        peoples.add(people);

    },

    del : function(obj) {

        //获取要删除的是哪个model

        var delWho = obj.currentTarget.id;



        //会触发collection的remove事件

        peoples.remove(delWho);

    },

    //当collection发生了add事件

    addOne : function(model) {

        //每个model会随机生成一个唯一的cid,用来识别,区分

        $("#list").append("<li>" + model.get('name') + "说:hello world!<button class='del' id='" + model.cid + "'>删除</button></li>");

    },

    //当collection触发了remove事件

    delOne : function(model) {

        //使用jquery的remove方法,删除dom和解除绑定的事件

        $('#' + model.cid).parent().remove();

    },

    //清空数据

    clear : function() {

        this.collection.reset();

        this.clearAll();

    },

    //清空dom

    clearAll : function() {

        $('#list').empty();

    }

});

 

步骤4. 程序入口

var peoples = new Peoples;

var app = new View({

    collection : peoples

});

这个例子还是比较直观的。把每个人当作model,队伍为collection,我们看到的界面是view。view绑定了collection的加减事件。通过对collection的操作,自动更新视图。

完整代码:

<%@ page language="java" pageEncoding="UTF-8"%>

<%

    String path = request.getContextPath();

%>

<!DOCTYPE html>

<html>

    <head>

        <title>backbone.js-Hello World</title>

    </head>

    <body>

        <button id="add">添加</button>

        <button id="clear">清空</button>

        <h3>队列</h3>

        <ul id="list"></ul>

    </body>

    <script src="<%=path %>/demo/backone/jquery-1.8.3.js"></script>

    <script src="<%=path %>/demo/backone/underscore-min.js"></script>

    <script src="<%=path %>/demo/backone/backbone-min.js"></script>

    <script type="text/javascript">

    (function() {

        //model,理解成一个数据个体

        var People = Backbone.Model.extend({

            //每个人都有他自身的属性

            defaults : {

                "name" : null

            }

        });

        

        //collection,理解成数据队列

        var Peoples = Backbone.Collection.extend({

            //对集合的类型进行设定,这里设定为人的集合

            model : People

        });

    

        //view,每个伟大的视图背后,都有默默的collection或者model

        var View = Backbone.View.extend({

            //设定这个视图的dom元素,也可以通过设定tagName, className, id 或者 attributes。如果没有特别设定,Backbone会为它套上空的div标签

            el : $("body"),

            initialize : function() {

                //集合的事件绑定,用来自动更新视图

                this.collection.bind("add", this.addOne);

                this.collection.bind("remove", this.delOne);

            },

            //使用了jquery的on方法,提供对视图的事件代理

            events : {

                "click #add" : "add",

                "click .del" : "del",

                "click #clear" : "clear",

            },

            add : function() {

                var name = prompt("请输入人名");

                //创建一个新model

                var people = new People({

                    'name' : name

                });

                //并添加到人员队列中,会触发collection的add事件

                peoples.add(people);

            },

            del : function(obj) {

                //获取要删除的是哪个model

                var delWho = obj.currentTarget.id;

                

                //会触发collection的remove事件

                peoples.remove(delWho);

            },

            //当collection发生了add事件

            addOne : function(model) {

                //每个model会随机生成一个唯一的cid,用来识别,区分

                $("#list").append("<li>" + model.get('name') + "说:hello world!<button class='del' id='" + model.cid + "'>删除</button></li>");

            },

            //当collection触发了remove事件

            delOne : function(model) {

                //使用jquery的remove方法,删除dom和解除绑定的事件

                $('#' + model.cid).parent().remove();

            },

            //清空数据

            clear : function(){

                this.collection.reset();

                this.clearAll();

            },

            //清空dom

            clearAll : function(){

                $('#list').empty();

            }

        });

    

        //实例化

        var peoples = new Peoples;

        var app = new View({

            collection : peoples

        });

    

    })(); 

    </script>

</html>

 

如果,您认为阅读这篇博客让您有些收获,不妨点击一下右下角的【推荐】。
如果,您希望更容易地发现我的新博客,不妨点击一下左下角的【关注我】。
如果,您对我的博客所讲述的内容有兴趣,请继续关注我的后续博客,我是【Ruthless】。

本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

你可能感兴趣的:(helloworld)