Backbone.js入门教程第二版笔记（3）

视图渲染

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

</head>
<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>

<script>
(function ($) {
    //此处添加下面的试验代码
    var SearchView=Backbone.View.extend({
        initialize:function(){},//初始化
        render:function(content){//渲染方法
            var template=_.template($('#search_template').html(),content);//模板解析
            $(this.el).html(template);//将解析后的代码片段添加到el中
        }
    });

    var searchView=new SearchView({//实例化一个视图
        el:$('#search_container')//指定el元素 （每个视图都会有el属性，如果不是我们指定，则backbone会自动生成一个div元素）
    });
    searchView.render({search_label:"搜索渲染"});//调用视图的渲染方法

})(jQuery);
</script>
</body>
</html>

 
需要注意的是在调用view.render的时候，需要给模板中所有的变量传值，不然会报错。关于$el，作者说是对view中元素的缓存，不明白这是什么意思，我感觉是jquery形式的el对象。

 

<ul>
<% _.each(labels, function(name) { %>
    <% if(name != "label2") {%>
    <li><%= name %></li>
    <% } %>
<% }); %>
</ul>
var SearchView = Backbone.View.extend({
    el: "#search_container",

    initialize: function(){
        var labels = ['label1', 'label2', 'label3'];
        this.render({labels: labels});
    },

    render: function(context) {
        //使用underscore这个库，来编译模板
        var template = _.template($("#search_template").html(), context);
        //加载模板到对应的el属性中
        $(this.el).html(template);
    },

});

var searchView = new SearchView();

这个例子与第一个类似，只不过它是在初始化的时候渲染了视图，并且el是在创建SearchView的时候设置的，模板也比第一个例子复杂点。

 

posted on 2014-09-16 13:34  叫我钱了个浅  阅读(247)  评论(0)  编辑  收藏  举报

导航