Backbonejs之view

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>