jQueryだけで$.getJSONを使ったシステムをMVC風な仕組みに構築してみる

1画面で動くWebシステムをド短期で作らなければいけなくて、
backbone.jsなど覚えている時間がなかったので、
jQueryだけを使ってMVC風な設計をしてみました。

今のところ動いていますが、破綻したら教えてください。

利用しているもの

・jQuery 2.1.3
・jQuery-template（https://github.com/codepb/jquery-template）
jQuery-templateの使い方はこちらをご覧ください。
http://qiita.com/kumechang/items/c8df04287ed641bcdeb0
　

ディレクトリ構造

ディレクトリはこんな構造にしてみました。

js
 - controllers // コントローラー的なものを入れます
 - models // モデル的なものを入れます
 - views // templateファイルとControllerを中継ぎするViewファイルを入れます。
 - templates // jQuery-template用のテンプレートファイルを入れます。

　　　　

HTMLファイルへの記載

HTMLファイルには次のものを書きます。
・scriptタグで各Javascriptをインクルード
・ルーティング

HTMLとルーティングはこんな感じ。

html

<!-- 例えばhogeの詳細を見るボタン -->
<a class="btn btn-primary btn_hoge_detail" data-hogeid="5">ほげの詳細</a>
<div class="area_hoge_detail"><!-- ここに出る --></div>

javascript

// ボタンと関数をbindしてルーティングを作る
var routing = function(){

  // hogeの詳細取得
  $(document).on('click',".btn_hoge_detail",function(){
    hogeController.show($(this).data('hogeid'));
  });


  // hogeの編集画面表示
  $(document).on('click',".btn_hoge_edit",function(){
    hogeController.edit($(this).data('hogeid'));
  });

詳細を見るaタグ（buttonでもよい）がクリックされたら、data-hogeidに記載されているID番号を元に、Controllerのshowメソッドを呼び出しています。

コントローラー

コントローラーはこんな感じで記載します。

hogeController

var hogeController = {

  // 詳細表示メソッド
  show : function(id){
    hogeModel.get(id,function(hoge){
      hogeView.setDetailTemplate(hoge);
    });

  },

  // 編集画面表示メソッド
  edit : function(id){
    hogeModel.get(id,function(hoge){
      hogeView.setEditTemplate(hoge);
    });

  }
}

例えばshowメソッドならば、hogeModelのgetメソッド（この中に$.getJSONが入っている）というものを呼びに行き、返却された結果をViewクラスに渡すようにしています。

モデル

モデルはこんな感じで記載します。

hogeModel

var hogeModel = {

  base_url : 'http://hoge.com/', // 外部からも変えられるように変数にする

  get : function(id,callback){
    $.getJSON(
      this.base_url + 'api/hoge/'+id,
      function(json){
        callback(json.data.hoge);
      });
  }
}

$.getJSONを行い、サーバから結果が返却されたら、引数としてもらっているCallback関数を実行します。

ビュー

Viewはこんな感じで記載します。

var hogeView = {

  setDetailTemplate : function(hoge){
      $(".area_hoge_detail").loadTemplate("js/templates/hogedetail.html",{
        "hogeName" : hoge.name,
        "hogeDetail" : hoge.detail
      },
      {append:false});
  }
}

ここはjQuery-temlateを呼び出して、該当の箇所に埋め込みます。
クラス、もしくはID指定なのがちょっと悔しい。

テンプレート

	<h3 data-content="hogeName"></h3>
	<p data-content="hogeDetail"></p>

まぁ、テンプレートはただのHTMLですね。

以上です。
ちゃんとフレームワークを覚えなきゃなーと思いつつ、ついついこうやって済ましてしまうのが悪い癖ですね。