1、库的引入
基于Backbone的开发,首先需要引入jQuery,underscore以及backbone的JS库文件。如下:
<script src="lib/jquery-1.8.3.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
2、View的模板
<script type="text/template" id="tpl-view">
<h1><%= name %></h1>
<p>age: <%= age %></p>
</script>
underscore.js的template方法(_.template)能够对上述模板进行”编译“,调用方式如下:
_.template($('#tpl-view').html()),
可以理解为:通过$('#tpl-view').html()获取到了#tpl-view节点下的HTML内容,然后将这些HTML内容作为参数传递给_.template方法”编译“,经编译后生成的是一个(模板)函数,该模板函数能够接收对象参数,而对象参数的属性值便可以对模板中的变量进行替换输出,如上例模板中的name和age变量。
3、Backbone.View
MyView = Backbone.View.extend({
template: _.template($('#tpl-view').html()),
initialize: function(){
this.render();
},
render: function(){
var templateArgs = {
name: 'Guy Incognito',
dob: 'March 2, 1967'
};
$(this.el).html(this.template(templateArgs));
}
});
在Backbone.View的构造中,得到了”编译“后的模板(template),在初始化函数(initialize)中调用渲染方法(render),而真正将模板内容渲染到页面的操作便定义在这个渲染render方法里面。render方法中首先定义了一个对象(将作为参数传进模板函数里面),然后通过$(this.el)获取到页面元素,调用jQuery的html()方法,将模板内容输入到相应的位置。
4、Backbone.View实例化
生成一个Backbone.View的实例:
var myview = new MyView({el: $('#maninfo')});
在实例化过程中传入页面标签的位置,通过{el: $('#certificate')}的形式,这样则能在上段代码中通过$(this.el)的形式获取到相应的页面元素。
至此,还需要在页面中声明一个挂钩标签:指定模板的输出区域/位置,如在body标签中加入以下内容:
<div id="maninfo"></div>
这样,模板与Backbone.View协作的桥梁便搭建起来了,页面中声明了一个标签,这个标签可以通过jQuery的方式获取,然后在实例化Backbone.View的使用作为el(element)参数传进去,这样Backbone.View便知道将模板的内容输出到页面的哪个位置: $(this.el).html(this.template(templateArgs));
5、完整的实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<div id="maninfo"></div>
<script type="text/template" id="tpl-view">
<h1><%= name %></h1>
<p>Age: <%= age %></p>
</script>
<script src="lib/jquery-1.8.3.min.js"></script>
<script src="lib/underscore-min.js"></script>
<script src="lib/backbone-min.js"></script>
<script>
(function($){
$(function(){
MyView = Backbone.View.extend({
template: _.template($('#tpl-view').html()),
initialize: function(){
this.render();
},
render: function(){
var templateArgs = {
name: 'winstar',
age: '2008'
};
$(this.el).html(this.template(templateArgs));
}
});
var myview = new MyView({el: $('#maninfo')});
});
})(jQuery)
</script>
</body>
</html>