2016.11.29
0でもできるオブジェクト指向 with 出席管理マネージャー#6【Ajax+Blade】
まーーたオブジェクト指向とは関係ない話をします(笑)(笑)(笑)(笑)(笑)(笑)(笑)(笑)
とりあえずwith 出席管理マネージャーと銘打ってるぐらいですので、このプロダクトを完成させる過程を記してみることにします。ということで今回は前回実装したAjax部分を用いて、DOM要素を動的に生成してみましょう。
単にDOM要素を生成するだけなら簡単な話なのですが、今回はBladeテンプレートとの併用です。一体どのように実装しましょうかね。
一つの案としては、Bladeテンプレート部分をjavascript部分に関数として埋め込んでおくという手が使えそうですかねえ･･････。ただ、後々の管理のためにも独自データ属性なんかは埋め込まないとマズそーですね。
とりあえずテンプレートだけ作ってみましょうか。さて、こーいうのをどう実装するかなんですけど･･････
これが使えそうですね。これはまだ使ったことがないものですね。っていうか今マニュアル読んでて知りました(笑)
<b>・管理グループ</b><br>
<div id="group_admin">
@each('list_content', $getlist->list_admin, 'list')
</div>
<div>
・<a href='{{url("group/".$list->g_id)}}' data-id="{{$list->g_id}}">{{$list->g_title}}</a>
</div>
めっちゃ簡単ですね。さて、ここからどうしましょうね。
とりあえずやっつけで作ってみます。
@include("dummies")
<!DOCTYPE html>
<html>
<<略>>
@yield("list_content_dummy")
</body>
</html>
<?php
class Dummy
{
public $g_id="dummy";
public $g_title="dummy";
}
$dummy[0] = new Dummy;//配列で作るのがポイント！
?>
@section('list_content_dummy')
<div id="list_content_dummy" style="display:none">
@each('list_content', $dummy, 'list')
</div>
@endsection
これでソースを覗くと･･････
無事にダミーデータが作成できていますね。
配列で作るのがポイントと書きましたが、これはeachで処理したいためです。includeで処理すると、$listという変数を用意しなければならず、コードの見通しが悪くなります。やはりダミーデータはダミーデータとわかるのが一番です。
これで、要素を指定してダミーデータをコピーしてくることができるようになりますね。dummy_titleの部分はtext()なんかが使えるんでしょうか。URLの部分も、prop()なんかで上書きできちゃいますかね？そのためにはLaravelのurl関数が使えないとなんですけど、無理ならdummyの部分を文字列置換すれば余裕ですね。そっちの方が簡単かもですね。dummyなんて文字列他じゃ絶対使わないので(笑)
せっかくなのでこの続きもこの記事で実装しちゃいましょ。
さて、せっかくオブジェクト指向のプログラミングをしているわけですから、たまにはそれに沿った実装をしてみましょうかね。
というのも、オブジェクト指向プログラミングを謳っておきながら前回のコードとか実は全然やってないですからね。配列取得も本来は別のクラスかなんかに抽出すべきかなとも思いますが、まぁそんなのは共通化するべきときに抽出すれば良いかなって感じはします。
どう抽出するかって感じなんですけど、今回やる内容としてはダミーのdivをコピーして、指定したIDの要素の先頭にappendするという操作ですね。この場合例えば･･････
1.指定したIDをコピーするメソッド
2.オブジェクトを指定したIDに貼り付ける(appendする)メソッド
ってのを作ると利便性高そうですね。クラスとして作らなくても関数でよくないかとも思ったんですが、まぁオブジェクトの値を用いて何らかの操作をする可能性もないこともないかも知れませんので一応クラスとして作ってみましょう。
//Cloneクラス(要素コピー)
Clone = function() {};
Clone.prototype.copy = function(origin_id) {
this.origin_id = origin_id;//親要素のID
this.cloned_obj = $("#"+this.origin_id+"").clone(true);
this.cloned_obj.removeAttr("id");//IDを消去
};
Clone.prototype.paste_before = function(parent_id, insertBefore=null) {
//insertBefore ->obj ：そのノードの前に挿入
// ->null ：先頭に挿入
this.parent_id = parent_id;
if(!insertBefore){insertBefore=$("#"+this.parent_id+" div:first");}
this.cloned_obj.insertBefore(insertBefore);
};
Clone.prototype.visible = function() {
this.cloned_obj.css('display', '');
};
//クローンテスト
function Clonetest() {
var clone = new Clone();
clone.copy("list_content_dummy");
clone.paste_before("group_admin");
clone.visible();
}
こんな感じに実装できましたね。一応拡張性を持たせるという意味で、paste_beforeメソッドに第二引数を設定しています。まぁ一行増やすだけで任意の位置の挿入できるようになりますしね。
ただ、最後尾に挿入する場合はappendを使わざるを得ないのでまた別のメソッドを用意する必要があります。if文を用いて条件分岐もできるんですが、ネストが深くなるだけなのでまぁ大人しく別のメソッドにしましょ。
とりあえず、オブジェクト指向的にプログラミングしたつもりです。visibleメソッドは別にpaste部分に統合しても良さそうだったのですが、一応分けました。コピーした後に数値いじる必要ありますしね。
オブジェクトとして生成することで、より可視的に操作できるんじゃないかなーと思います。オブジェクトの情報が変数cloneに全部入ってるので、操作したければそこからアクセスすればいいですしね。らくちんらくちん。
ということで、後は具体的にパラメータ変更部分を書けば動くことになりそうですね。まぁそこは別に新しい知識とか要らないんで、記事には書かないことにします(笑)