视图渲染
<!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>
时间： 2024-10-06 08:00:23