Nighttime Peanut Migrations
    Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

    bell-tree-mvpublic

    BellTreeMV

    Code Climate

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

    Keywords

    none

    install

    npm i bell-tree-mv

    Downloadslast 7 days

    3

    version

    0.9.1

    license

    MIT

    repository

    github.com

    last publish

    collaborators

    • avatar