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的優點，可是依然可讓代碼看起來更加模塊化。