Backbone JS - 如何編寫可重用組件

我想寫一個可重用組件作爲我的Backbone應用程序的一部分。從根本上說，我想寫一個表格過濾器助手這樣我就可以：Backbone JS - 如何編寫可重用組件

調用視圖js文件內的FUNC，這將創建一個下拉，可以聽的變化，然後觸發數據的變化並刷新視圖。

最後，我希望能夠做這樣的事情：

// generic view.js 

// to spawn a dropdown 
formFilter('select', data); 

// to spawn a series of checkboxes 
formFilter('checkbox', data);

顯然模塊代碼將偵聽事件和處理工作。

我的問題是，創建可重用組件的標準方式是什麼？谷歌並沒有給我太多的幫助，#documentcloud IRC也不是特別活躍。

來源

2013-02-02 HankHendrix

根據您在問題中提供的信息，很難說您的特定組件將如何最佳組件化。然而，一個強大的可重用策略是mixins。

只要你定義一個簡單的對象方法的文字，如：

Mixins.filterable = { 
    filterForm: function(selector, data) { 
    this.$(selector)... 
    } 
} 

Mixins.sortable = { 
    sortForm: function(selector) { 
    this.$(selector)... 
    } 
}

然後你就可以將它們混入任何View的原型：

_.extend(FooView.prototype, Mixins.filterable, Mixins.sortable);

的混入方法然後將可在FooView的所有實例中使用。

render: function() { 
    //.. 
    this.filterForm('select', this.model); 
}

由於混入的方法將被綁定到視圖實例的上下文中，可以參考this，並且通過邏輯擴展，this.$el中，混入的方法內。這將使你聽視圖的事件：

Mixins.filterable = { 
    filterForm: function(selector, data) { 
    this.$(selector).on('change', this._handleFilterChange); 
    }, 

    _handleFilterChange: function(e) { 
    //.. 
    }  
}

如果要對所有視圖可用的方法，它們混合到Backbone.View原型來代替：

_.extend(Backbone.View.prototype, Mixins.filterable, Mixins.sortable);

來源

2013-02-02 21:15:31 jevakallio

Backbone JS - 如何編寫可重用組件

回答

相關問題