Backbonejs之view

来源：互联网发布：中国高铁功臣知乎编辑：程序博客网时间：2024/06/05 15:59

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>

0 0