クライアントサイドのMVCのうちMとVの枠組みを提供するライブラリです。 Modelのインスタンスに対し、Modelを監視するViewインスタンスを追加/削除できる機能を持ちます。 jQueryやunderscoreに依存していません。
npm install bell-tree-mv --save
var BellTreeMV = require('bell-tree-mv');
<script src="./js/BellTreeMV.js"></script>
/**
* サンプルModel(ボタンが押された回数を保持するModel)
*/
var Counter = function () {
'use strict';
BellTreeMV.Model.call(this);
this.state = {
count: 0
};
};
BellTreeMV.inheritPrototype(Counter.prototype, BellTreeMV.Model.prototype);
/**
* サンプルView(ボタンが押された回数を表示するView)
*/
var CounterView = function (element) {
'use strict';
BellTreeMV.View.call(this);
this.element = element
};
BellTreeMV.inheritPrototype(CounterView.prototype, BellTreeMV.View.prototype);
CounterView.prototype.render = function (state) {
'use strict';
this.element.value = state.count;
};
// ModelとViewのインスタンスを作成
var counter = new Counter();
var counterView1 = new CounterView(document.getElementById('input_1'));
var counterView2 = new CounterView(document.getElementById('input_2'));
// ModelにViewを紐付ける
counter.addObserver(counterView1);
counter.addObserver(counterView2);
document.getElementById('test_button').addEventListener('click', function () {
'use strict';
var updateValue = counter.getState('count') + 1;
counter.setState({count: updateValue});
});