Backbone中的View使用方法

最新推荐文章于 2019-04-24 16:15:58 发布

2008winstar

最新推荐文章于 2019-04-24 16:15:58 发布

阅读量108

点赞数

分类专栏： Backbone 文章标签： javascript ViewUI

本文链接：https://blog.csdn.net/winstar1688/article/details/84609058

版权

Backbone 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

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>

运行结果：

2008winstar

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Backbone中的View使用方法

1、库的引入基于Backbone的开发，首先需要引入jQuery，underscore以及backbone的JS库文件。如下：&lt;script src="lib/jquery-1.8.3.min.js"&gt;&lt;/script&gt;&lt;script src="lib/underscore-min.js"&gt;&lt;/script&gt;&
复制链接

扫一扫

专栏目录