ジンジャー研究室

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

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

Ajax

Ajaxを使って、「しばらく待った後にModelを更新してViewに反映する」という操作をしてみます。
jQueryのajaxと同じように使うと勝手にViewに反映してくれるようにすると嬉しい気がします。

長くなってきたのですが、まだコピペすれば動く状態を保ってはいます。

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <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);
          }
        };
        _C.prototype.ajax = function(params){
          //--ここからスタブ
          setTimeout(function(){
            if(!params.data){
              params.error('入力してください');
            }else{
              var number = parseInt(params.data.charAt(0));
              if(number){
                params.success('なんとか町の' + number + '丁目');
              }else{
                params.success();
              }
            }
            C.refresh();
          }, 2000);
          //--ここまでスタブ
        };
        return new _C();
      })();
      $.fn.mvc = function(eventName, f){
        return this.on(eventName, function(e){
          f(e);
          C.refresh();
        });
      };
      $(document).ready(function(){
        C.refresh();
      });
      //ここまでフレームワーク
      
      //ここから実装
      M.flash = {};//load～次のloadまで
      M.tmp = {};//load中
      C.createView(function(M){
        $("#address").val(M.address);
        $("#error").text(M.flash.error || '');
        $("#info").text(M.tmp.info || M.flash.info || '');
      });
      $(document).ready(function(){
        $('#postal').mvc('keyup', function(e){
          M.postal = e.currentTarget.value;
        });
        $('#fill').mvc('click', function(){
          M.flash = {};
          M.address = "";
          C.ajax({
            data: M.postal,
            success: function(address){
              if(address){
                M.address = address;// 2.取得したデータをModelに反映
              }else{
                M.flash.info = "見つかりませんでした";//2.
              }
              M.tmp = {};
            },
            error: function(error){
              M.flash.error = error;//2.
              M.tmp = {};
            }
          })
          M.tmp.info = 'now loading...';// 1.待ち状態にする
        });
      });
    </script>
  </head>
  
  <body>
    <dt>郵便番号</dt><dd><input id="postal" type="text"></input>
    <label id="error" style="color:red;"></label></dd>
    <input id="fill" type="button" value="住所を自動入力"></input>
    
    <dt>住所</dt><dd><input id="address" type="text"></input>
    <label id="info"></label></dd>
  </body>

</html>

スタブのところは置いておいて、なんだかごちゃごちゃしてきました。
ロード中の表示と、それを戻す処理、それに加えてステータスの表示と、それを戻す処理まが加わったせいですね。
上手いことフレームワークに押し込めたいところですが。

あと、テンプレート欲しいですね。