Backbone React Mixins

[jollen]

前言

Backbone 是 Single Page Application 的軟體框架[1]，View 與 Model 是 Backbone 框架所提供的 2 大設計模式，其用途簡述如下：

• Backbone.View 提供 view model 的設計，一個簡單的概念是，它提供 MVC 架構模式中的 V，重用 Backbone.View 來設計 stateless view
• Backbone.Model 提供 data model 的設計，使用 Backbone.Model 來處理 REST API

Backbone.View 的設計，充許基本的 presentation control logic 實作，這是 MVC 架構模式的作法。Backbone.View 也能維護一份內部的「state」，這也是 MVC 架構模式的作法。Presentation control logc 與 state 維護，如果實作為一個 global 的獨立系統，這能歸納為 MVVM 模式。

所以說，Backbone 框架是 MVC/MVP/MVVM 哪種模式並不重要，所以就稱它為 MV* 模式的框架。因為，最重要的是，你最後實作出來的 Application。你的 Application 是什麼架構模式，是由開發者決定的。

Backbone + React

Backbone.View 能包含一些基本的 control logic，並且能綁定 Backbone.Model 的事件，例如：

(TBD)

讓 Backbone 與 React 結合的方式：

• Backbone.Model 做為 MVC 的 M
• React Component 做為 MVC 的 V
• Backbone.View 包含簡單的 control logic，而主要的工作是將 React Component 綁定 Backbone.Model 事件，可將其視為 MVC 的 C

React + Backbone

在 React Component 裡加上 Backbone Model 的 Mixin[2]：

var MyComponent = React.createClass({
  mixins: [BackboneMixin],
  ...
  getBackboneModels: function() {
  }
});

Backbone Model KVO Pattern

Backbone.Model 的設計採用 event binding 方式外，也支援 KVO Pattern 的實作[3]。

var modelA = new ModelA();
var modelB = new ModelB();

// modelA.bindTo('change', modelB.fooHandler());
this.listenTo(modelA, 'change', modelB.fooHandler());
modelA.set('foo', 'I am new');

Sub Views

• Container View 與 Subviews
• Manage Subviews[4]
  • Rendering a collection[5]
  • Destroy Subviews[6]

參考資料

[1] https://addyosmani.com/backbone-fundamentals/#client-side-mvc-single-page-apps
[2] http://joelburget.com/backbone-to-react/
[3] https://github.com/john-n-smith/mvcobject-js
[4] http://orizens.com/wp/topics/backbone-view-patterns-how-why-to-use-subviews/
[5] http://orizens.com/wp/topics/backbone-view-patterns-rendering-a-collection/
[6] http://perfectionkills.com/understanding-delete/