Backbone 的使用（五）—— View 篇

爱分享的Martin、

于 2019-10-18 10:58:24 发布

阅读量227

点赞数

分类专栏： # 学习资源

本文链接：https://blog.csdn.net/qq_37026254/article/details/102620528

版权

学习资源专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、渲染

模板

<body>
    <div id="search_container"></div>

    <script type="text/template" id="search_template">
        <label><%= search_label %></label>
        <input type="text" id="search_input" />
        <input type="button" id="search_button" value="Search" />
    </script>
</body>

首先看一下这个模板, 和我熟悉的模板语法dom 部分是差不多的，区别就在于script 部分的渲染。
那么bab 如何使用尼？

var SearchView = Backbone.View.extend({
    render: function(context) {
        var template = _.template($("#search_template").html());
        $(this.el).html(template(context));
    }
});
var searchView = new SearchView({el: $("#search_container")});
searchView.render({search_label: "搜索渲染"});

这里的render 就是我们的渲染函数了，里面就是和其他模板语法一样，将内容渲染。
实例化 SearchView 中里面的el 就是我们的选择器，下面render 传参就是摸板中的各个变量

这里面需要注意的是在模板中定义的所有变量必须在render的时候传递参数过去，不然就会报错。关于el还有一个东西叫做$el,这个东西是对view中元素的缓存。

dom 动态生成
就和我们的js一样，除了模板语法我们也可以动态创建dom，然后插入对应标签。

   var ListView = Backbone.View.extend({  
        tagName : 'div',  
        className : 'listview',  
        id : 'list',  
        attributes : {  
            title : '列表',  
            style : 'color:red'  
        },  
        render : function() {  
            this.el.innerHTML = 'Hello World!';  
            document.body.appendChild(this.el);  
        }  
    });  
    var listview = new ListView();  
    listview.render();

运行上面的js ，最后会在body中生成一个div，相比较js 的创建会更简单。

<div title="列表" style="color:red" id="list" class="listview">Hello World!</div>

二、 event 事件

<p id="view">  
    <input type="button" value="Create" id="create" />  
    <input type="button" value="Read" id="read" />  
    <input type="button" value="Update" id="update" />  
    <input type="button" value="Delete" id="delete" />  
</p>  
<script type="text/javascript">  
    var MyView = Backbone.View.extend({  
        el : '#view',  
        events : {  
            'click #create' : 'createData',  
            'click #read' : 'readData',  
            'click #update' : 'updateData',  
            'click #delete' : 'deleteData'  
        },  
        createData : function() {  
            // todo  
        },  
        readData : function() {  
            // todo  
        },  
        updateData : function() {  
            // todo  
        },  
        deleteData : function() {  
            // todo  
        }  
    });  
    var view = new MyView();
</script>

events中的事件是通过delegate()方法绑定到视图对象的el元素上。

events中选择器所对应的元素必须处于视图的el元素之内，否则绑定的事件是无法生效的。

有些情况下可能我们仍然需要手动绑定和解除事件，视图对象提供了delegateEvents()和undelegateEvents()方法。

爱分享的Martin、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Backbone 的使用（五）—— View 篇

一、渲染模板<body> <div id="search_container"></div> <script type="text/template" id="search_template"> <label><%= search_label %></label> ...
复制链接

扫一扫