Backbone的一点使用心得

Backbone的其实感受上上手很难，大概在一年前就想实践下，结果老是没有付诸行动，此次需求中狠狠心决定必定要使用一次看看，感觉下。

但是第一步真的比较困难，由于直接看API好像没有感受就在网上找实例看看，可是我只能说有些人在给实例的时候根本就没有考虑过新手的感觉。

我曾经在看完一些教程以后的迷惑：

1. 在view中this.model到底表明的是什么？

2. template如何写？

其实这两个问题很简单，可能就是一句话的事情，也许是我对于Backbone了解不多的缘故，我当时确实不明白。

 

下面上一点代码：

Model：

var TrendModel = Backbone.Model.extend({
        urlRoot: '/price/trend.json'
});
var trendM = new TrendModel();

这个Model很简单就是提供一个连接，根据这个连接能够获取价格趋势的数据

 

View：

var TrendView = Backbone.View.extend({
        el:  $('.js-report-tr'),
        template:  _.template($('#trendTemplate').html()),
        events: {
                // 单引号很重要，否则识别不了
                'click .js-trend-show':  'show'
        },
        initalize: function() {
                // 确保this的正确做用域
                _.bindAll(this, 'render', 'show');
                this.model.bind('change', this.render);
        }，
        render: function() {
                var el = this.template(this.model.attributes);
                $(this.el).parent().append(el);
                return this;
        },
        show: function() {
                //  执行搜索操做，传递参数
                this.model.fetch({
                        data: $.param({
                                comId: 111
                        })
                });
        }
})；

var trendV = new TrendView({
        model: trendM
});

看最后的3行，你就明白了model是指的什么了，其实model就是在建立View实例对象的时候传递的一个参数，而这个参数就是我上面定义的Model。

View包括几个部分：

el：我感受就像一个容器或者说是执行环境上下文，应该怎么描述呢？举个例子吧，在backbone的view中咱们常常这样查找元素

this.$el.find('.xx')

其实对应于jquery就是

$('.js-report-tr').find('.xx')

events：事件绑定，这里其实仍是和el有点关联，例如在整个文档中有多个.js-trend-show元素，咱们绑定事件的时候其实是给.js-report-tr下的.js-trend-show元素绑定事件，其余的不在.js-report-tr的.js-trend-show都不会被绑定对应的事件。

注意点：

1. 事件方法名要加单引号，否则识别不了。

2. View中事件绑定应该使用的是事件代理。

template：模板，我当时看过几个模板的例子，可是就不知道模板是什么语言规则，后来其实我以为本身是有点二了，实际模板就是一个js配合html的产物。backbone的模板有点像java混合jsp的感受，有点混乱的感受，固然好像<%%>能够自定义成其余的符号。

 

在使用Backbone中其实也遇到了一点问题

1.  model.fetch操做是否将model的值设置成undefined

最开始的时候使用model.fetch后，在render中获取this.model是undefined，当时很是郁闷，想说get请求以后model被清空，那get干什么啊，后来查了下资料

使用_.bindAll(this,'render'),确保this的正确做用域。

 

好像有点混乱，下面作个总结吧

其实Backbone还有Router，Collections没有使用，因此对于Backbone只能是初步有了个了解，Backbone适用于单页面应用，个人实践其实有点纯粹想实验一下。

在这个实践中并无体现Backbone的优点，可是依然可让代码看起来更加模块化。