view控制的是如何显示,包括:显示的元素,元素绑定的时间以及操作上的交互逻辑。
下面的小例子展示了backbone的view类的使用:
<!-- Backbone.js 依赖jquery和underscore -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<!-- 加载backbone -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.3.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<div class="search">
</div>
<script type="text/template" id="search_template">
<label for="search">search</label>
<input type="text">
<input type="button" id="search_button" value="search">
</script>
<script>
var SearchView = Backbone.View.extend({
/**
* 套路,必写之
*/
initialize: function () {
this.render();
},
render: function () {
/**
* 这里使用handlebars编译模板
* 当然也可以使用underscore的模板引擎
*/
var template = Handlebars.compile($('#search_template').html(), {});
this.$el.html(template);
},
/**
* 往当前view上添加事件
*/
events: {
'click #search_button': 'dosearch',
},
dosearch: function () {
alert('you search' + $('input[type=text]').val());
},
});
var searchView = new SearchView({el: $('.search')});
</script>