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