JavaScript学习6：backbone中的view实例
Backbone的view是用来显示你的model中的数据到页面的，同时它也可用来监听DOM上的事件然后做出响应。
先要给出一个页面的大体代码，下面的所有试验代码都要放到这里面：
[html] <!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-view</title>
</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>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
//此处添加下面的试验代码
})(jQuery);
</script>
</html>
<!DOCTYPE html>
<html>
<head>
<title>the5fire-backbone-view</title>
</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>
</body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>
<script>
(function ($) {
//此处添加下面的试验代码
})(jQuery);
</script>
</html>
1、一个简单的view
SearchView = Backbone.View.extend({
initialize: function(){
alert('init a SearchView');
}
});
var searchView = new SearchView();
是不是觉得很没有技术含量，所有的模块定义都一样。
2、 el属性
这个属性用来引用DOM中的一些元素，每一个Backbone的view都会有这么个属性，
如果没有显示声明，Backbone会默认的构造一个，表示一个空的div元素
SearchView = Backbone.View.extend({
initialize: function(){
alert('init a SearchView');
}
});
var searchView = new SearchView({el: $("#search_container")});
接着来看这个el的应用，首先注意标签中的这个标签，这是我们定义的一个模板。
SearchView = Backbone.View.extend({
initialize: function(){
//this.render();
},
render: function() {
//使用underscore这个库，来编译模板
var template = _.template($("#search_template").html(),{});
//加载模板到对应的el属性中
this.el.html(template);
}
});
var searchView = new SearchView({el: $("#search_container")});
searchView.render(); //这个reander的方法可以放到view的构造函数中
运行页面之后，会发现script模板中的html代码已经添加到了我们定义的div中。
3、再来看对DOM中元素事件的绑定，很简单
[javascript] SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function() {
//使用underscore这个库，来编译模板
var template = _.template($("#search_template").html(),{});
//加载模板到对应的el属性中
this.el.html(template);
},
events:{ //就是在这里绑定的
'click input[type=button]' : 'doSearch' //定义类型为button的input标签的点击事件，触发函数doSearch
},
doSearch: function(event){
alert("search for " + $("#search_input").val());
}
});
var searchView = new SearchView({el: $("#search_container")});
SearchView = Backbone.View.extend({
initialize: function(){
this.render();
},
render: function() {
//使用underscore这个库，来编译模板
var template = _.template($("#search_template").html(),{});
//加载模板到对应的el属性中
this.el.html(template);
},
events:{ //就是在这里绑定的
'click input[type=button]' : 'doSearch' //定义类型为button的input标签的点击事件，触发函数doSearch
},
doSearch: function(event){
alert("search for " + $("#search_input").val());
}
});
var searchView = new SearchView({el: $("#search_container")});
自己运行下，是不是很简答，比写$(“input[type=button]“).bind(‘click’,function(){})好看多了吧。
4、view中的模板
如果你用过django模板的话，你应该会想到前面提到的模板和django模板是不是有同样的功能，既然是模板，那就应该能传入数据。
没错了，这个和django的使用一样，可以在模板中定义变量，然后通过字典的方式传递进去
注意script模板的变化
[javascript] SearchView = Backbone.View.e
补充：web前端 , JavaScript ,
