Backbone.js学习之View

千呼万唤始出来，终于到最后一个要点View了。照旧，先来一睹官方文档：

Backbone views are almost more convention than they are code — they don't determine anything about your HTML or CSS for you, and can be used with any JavaScript templating library. The general idea is to organize your interface into logical views, backed by models, each of which can be updated independently when the model changes, without having to redraw the page. Instead of digging into a JSON object, looking up an element in the DOM, and updating the HTML by hand, you can bind your view's render function to the model's "change" event — and now everywhere that model data is displayed in the UI, it is always immediately up to date.

继续蹩脚的翻译一下：

Backbone的View的使用相当方便 — 它不会影响任何的 HTML 或 CSS 代码，并且可以与任意 Javascript 模板引擎相结合。 基本的做法就是，将界面组织到逻辑视图，存放在模型，当模型数据发生改变，视图立刻自动更新，这一切都不需要重绘页面。 我们再也不必钻进 JSON 对象中，查找 DOM 元素，手动更新 HTML 了，通过绑定视图的 render 方法到模型的 "change" 事件 — 模型数据会即时的在 UI 中进行同步更新。

扫完文档，是不是觉得相当nice，但是backbone的页面数据自动变化是要手动来处理的，不像Angularjs会自动处理。至于这两种方式孰优孰劣，我只能说各有千秋，业务决定一切。

简单的View例子

    <div id="search_container"></div>

    <script type="text/x-template" id="search_template">
            <label><%= search_label %></label>
            <input type="text" id="search_input" />
            <input type="button" id="search_button" value="Search" />
    </script>

        var SearchView = Backbone.View.extend({
        initialize: function(){ 
            // this.render({search_label: "情怀搜索"});
        }, 
        render: function(context) {
            //使用underscore这个库，来编译模板
            var template = _.template($("#search_template").html())(context);
            //加载模板到对应的el属性中
            $(this.el).html(template);
        }
    });
    var searchView = new SearchView({el: $("#search_container")});

    //这个reander的方法可以放到view的构造函数中
    //这样初始化时就会自动渲染
    searchView.render({search_label: "情怀搜索"});

这算一个非常简单的视图渲染了。另外，JS模板推荐一下doT.js http://olado.github.io/doT/index.html,小巧，快速，强大！

view中event的使用

页面上的操作除了可以由之前的router来处理之外，在一个view中定义元素，还可以使用event来进行事件绑定。这里要注意的是在view中定义的dom元素是指你el标签所定义的那一部分dom节点，event进行事件绑定时会在该节点范围内查找。

var SearchView = Backbone.View.extend({
        el: "#search_container",

        initialize: function(){
            this.render({search_label: "搜索按钮"});
        },
        render: function(context) {
            //使用underscore这个库，来编译模板
            var template = _.template($("#search_template").html(), context);
            //加载模板到对应的el属性中
            $(this.el).html(template);
        },

        events:{  //就是在这里绑定的
            //定义类型为button的input标签的点击事件，触发函数doSearch
            'click input[type=button]' : 'doSearch'

        },

        doSearch: function(event){
            alert("search for " + $("#search_input").val());
        }

    });

    var searchView = new SearchView();

和$("input[type=button]").bind('click',function(){})相对比，似乎规范了不少。

View中模型与视图的绑定，事件的绑定等等，对于一个重前端业务逻辑的应用来说，确实更加便于开发。

总结

到本篇为止，Backbone.js的基础知识我们算是简单的了解了一下，也大概知道了利用Backbone.js来做开发的时候，大体开发模式是怎样的，数据、逻辑与视图三者间的关系也大体有了个基本的认识。

对于业务逻辑比较复杂的，使用MVC模式来进行开发，对数据，业务，视图的解耦比较有利，同时，也能在一定程度上降低开发的难度，以及后期维护的难度。

基本概念到此为止，使用的时候随时看看文档，估计能解决不少问题，再逛逛Stack Overflow等社区论坛估计就能填掉踩到的99%的坑了。剩余的1%，就看造化了。。。