BellTreeMV

Abstract

クライアントサイドのMVCのうちMとVの枠組みを提供するライブラリです。 Modelのインスタンスに対し、Modelを監視するViewインスタンスを追加/削除できる機能を持ちます。 jQueryやunderscoreに依存していません。

install

npm install bell-tree-mv --save

import

require

var BellTreeMV = require('bell-tree-mv');

script tag

<script src="./js/BellTreeMV.js"></script>

Modelの定義方法

/**
 * サンプルModel(ボタンが押された回数を保持するModel)
 */
var Counter = function () {
  'use strict';
  BellTreeMV.Model.call(this);
  this.state = {
    count: 0
  };
};
BellTreeMV.inheritPrototype(Counter.prototype, BellTreeMV.Model.prototype);

Viewの定義方法

/**
 * サンプル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の関連付け

// 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);

Modelの更新

document.getElementById('test_button').addEventListener('click', function () {
  'use strict';
  var updateValue = counter.getState('count') + 1;
  counter.setState({count: updateValue});
});