Backbone.js实战之视图学习笔记

  严格来说模型(Model)和集合(Collection)都属于底层的数据处理,真正与页面交互的视图(View),他的核心功能是处理数据业务逻辑,绑定DOM事件,渲染模型和集合数据。

  • el:表示该View所代表的DOM元素,在render函数中,会同步到DOM操作中去。
  • initialze:调用new时,会触发的函数调用,类似构造函数。
  • render:触发DOM操作,浏览器会渲染
  • 最后一句,说明在new时,可以传递参数

1.1   通过视图对象添加DOM元素

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var testview = Backbone.View.extend({
        el: '#show',
        render: function (content) {
            this.el.innerHTML = content;
        }
    });
    var test = new testview();
    test.render("backbone是构建前端MVC的利器");
</script>

 

c.       页面效果

d.      源码分析

1.2    视图对象访问模型

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶国荣",
        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>

 

c.       页面效果

d.      源码分析

1.3   视图对象访问集合对象

a.       功能描述

b.      实现代码

    <style type="text/css">
        .cls_6
        {
            font-size: 12px;
        }
    </style>
</head>
<body>
    <div id="show" class="cls_6"></div>
</body>
<script type="text/javascript">
    var stumodels = [{
        Code: "10101",
        Name: "刘真真",
        Score: 530
    }, {
        Code: "10102",
        Name: "张明基",
        Score: 460
    }, {
        Code: "10103",
        Name: "舒虎",
        Score: 660
    }, {
        Code: "10104",
        Name: "周小敏",
        Score: 500
    }, {
        Code: "10105",
        Name: "陆明明",
        Score: 300
    }];
    var stulist = new Backbone.Collection(stumodels);
    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>

 

c.       页面效果

d.      源码分析

1.4   处理逻辑的模板

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            padding: 5px;
        }
    </style>
</head>
<body>
    <div id="score"></div>
    <script type="text/template" id="score-tpl">
       <%= score>600 ? "优秀":"及格"%>
    </script>
</body>
<script type="text/javascript">
    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 }));
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
    stuv.render(600)
</script>

 

c.       页面效果

d.      源码分析

1.5   显示多项内容的模板

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>编号:<%=Code%></li>
       <li>姓名:<%=Name%></li>
       <li>分数:<%=Score%></li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10107",
        Name: "陶国荣",
        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()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

 

c.       页面效果

d.      源码分析

1.6   自定义模板变量标记

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus"></ul>
    <script type="text/template" id="stus-tpl">
       <li>自定义模版变量标记</li>
       <li>编号:{{Code}}</li>
       <li>姓名:{{Name}}</li>
       <li>分数:{{Score}}</li>
    </script>
</body>
<script type="text/javascript">
    _.templateSettings = {
        interpolate: /\{\{(.+?)\}\}/g
    };
    var student = Backbone.Model.extend({
        defaults: {
            Code: "",
            Name: "",
            Score: 0
        }
    });
    var stus = new student({
        Code: "10106",
        Name: "占小方",
        Score: 380
    });
    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()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview({ model: stus });
    stuv.render();  
</script>

 

c.       页面效果

d.      源码分析

1.7   视图中简单事件绑定

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        div
        {
            width: 260px;
            text-align: center;
            padding: 5px;
        }
        .changed
        {
            border: solid 1px #555;
        }
    </style>
</head>
<body>
</body>
<script type="text/javascript">
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.render();
        },
        render: function () {
            this.$el.append('<div id="backbone">backbone是构建前端MVC的利器</div>');
        },
        events: {
            'click div#backbone': 'togcls'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

1.8   绑定视图中的多个事件

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        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="点击一下" />
    </script>
</body>
<script type="text/javascript">
    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: "backbone是构建前端MVC的利器"
            })
            );
        },
        events: {
            'click div#backbone': 'togcls',
            'click input#btnshow': 'toggle'
        },
        togcls: function () {
            $("#backbone").toggleClass("changed");
        },
        toggle: function () {
            $("#backbone").toggle();
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

 

d.      源码分析

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

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 13px;
        }
        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">backbone是构建前端MVC的利器</div>
       <input id="btn_a" type="button" value="切换样式" />
       <input id="btn_b" type="button" value="取消绑定" />
       <input id="btn_c" type="button" value="重新绑定" onclick="stuv.rebind()"/>
    </script>
</body>
<script type="text/javascript">
    var stuv = null;
    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();
        }
    });
    //实例化一个view视图
    stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

1.10 使用Backbone框架开发Web应用

a.       功能描述

b.      实现代码

    <style type="text/css">
        body
        {
            font-size: 12px;
        }
        ul
        {
            list-style-type: none;
            padding: 0px;
            margin: 0px;
            width: 270px;
        }
        ul li
        {
            margin: 5px 0px;
        }
        ul .lh
        {
            font-weight: bold;
            border-bottom: solid 1px #555;
            background-color: #eee;
            height: 23px;
            line-height: 23px;
        }
        ul .lc
        {
            border-bottom: dashed 1px #ccc;
            height: 23px;
            line-height: 23px;
        }
        ul li span
        {
            padding-left: 10px;
            width: 80px;
            float: left;
        }
    </style>
</head>
<body>
    <ul id="ulshowstus">
        <li class="lh">
            <span>编号</span>
            <span>姓名</span>
            <span>分数</span>
        </li>
    </ul>
    <br />
    <ul>
        <li>编号:
            <input id="txtCode" type="text" />
        </li>
        <li>姓名:
            <input id="txtName" type="text" />
        </li>
        <li>分数:
            <input id="txtScore" type="text" />
        </li>
        <li>
            <input id="btnSubmit" type="button" 
                   value="提交" />
        </li>
    </ul>
    <script type="text/template" id="stus-tpl">  
       <li class="lc">
           <span><%=Code%></span>
           <span><%=Name%></span>
           <span><%=Score%></span>
       </li>
    </script>
</body>
<script type="text/javascript">
    var student = Backbone.Model.extend({
        defaults: {
            Code: "10001",
            Name: "张三",
            Score: 100
        }
    });
    var stulist = Backbone.Collection.extend({
        initialize: function (model, options) {
            this.on("add", options.view.showmodel);
        }
    });
    var stuview = Backbone.View.extend({
        el: $("body"),
        initialize: function () {
            this.stul = new stulist(null, { view: this })
        },
        events: {
            "click #btnSubmit": "addmodel"
        },
        addmodel: function () {
            var stum = new student({
                Code: $("#txtCode").val(),
                Name: $("#txtName").val(),
                Score: $("#txtScore").val()
            });
            this.stul.add(stum);
        },
        showmodel: function (model) {
            this.template = _.template($("#stus-tpl").html());
            $("#ulshowstus").append(this.template(model.toJSON()));
        }
    });
    //实例化一个view视图
    var stuv = new stuview();
</script>

 

c.       页面效果

d.      源码分析

 

posted on 2016-06-24 14:35  nap  阅读(547)  评论(0编辑  收藏  举报