您的位置:首页 > Web前端 > JavaScript

Backbone.js入门教程第二版笔记(3)

2014-09-16 13:34 676 查看
视图渲染

<!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的时候设置的,模板也比第一个例子复杂点。

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: