ジンジャー研究室

長めのつぶやき。難しいことは書きません。

JavaScriptでMVC実装してみたその2

イベント

昨日の続きです。
自作のMVC フレームワークっぽいものを構築して遊んでいます。
イベント終了時に自動で再描画が走ると幸せになれそうなので、jQueryを拡張してイベントハンドリングしてみます。

<html>
  <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script>
      
      var M = {};
      
      var C = (function(){
        var V = function(render){
          this.render = render;
        };
        var _C = function(){
          this.views = [];
        };
        _C.prototype.createView = function(f){
          this.views.push(new V(f));
        };
        _C.prototype.refresh = function(){
          for(var i in this.views){
            this.views[i].render(M);
          }
        };
        return new _C();
      })();
      $.fn.mvc = function(eventName, f){//Mを書き換えたら再描画
        return this.on(eventName, function(e){
          f(e);
          C.refresh();
        });
      };
      $(document).ready(function(){
        C.refresh();//初期化
      });
      //ここまでフレームワーク
      
      //ここから実装
      M.hoge = "HOGE";
      C.createView(function(M){
        $("#view1").text(M.hoge);
      });
      C.createView(function(M){
        $("#view2").text(M.hoge.toLowerCase());//小文字で表示
      });
      $(document).ready(function(){
        $('#trigger').mvc('click', function(){//Modelの書き換え
          M.hoge = (M.hoge == "HOGE") ? "HOMU" : "HOGE";
        });
      });
      
    </script>
    
  </head>
  
  <body>
    <div id="view1"></div>
    <div id="view2"></div>
    <input id="trigger" type="button" value="click"></input>
  </body>

</html>

それっぽくなってきた？
なにやらCの存在意義が危うくなってきました。