ホームページを作る（サーバーサイドなし）

自分用メモ②

「非情報系でも管理できるホームページ」

「黙って既存のCMSを使え」

とか言わないで＞＜一度やってみたかったんです・・・

某大学のサークルのホームページを作ってる最中です。

まぁそれで色々やってたんで忘れないうちにメモメモ

求められるもの

良い感じに更新しやすい
できればHTMLとか開かせないようにしたい
サーバ管理なんてたぶんアレなのでフロントで事済ませたい

そこから導き出される結論は

f:id:patioglass:20150307203617j:plain

JSON形式で全部管理させちゃえー！('ω')

JSON形式で更新情報も何もかもコピペ追加で管理させることにけってーい！

$(.hoge).append("<p>引っ張て来たjson文字列</p>");

JQueryでこんな感じでやればいけるでしょっ！

↓↓↓　結果　↓↓↓

$(.hoge).append("<p>引っ張て来たjson文字列1</p>");

$(.hoge).append("<p>引っ張て来たjson文字列2</p>");

$(.hoge).append("<p>引っ張て来たjson文字列3</p>");

$(.hoge).append("<p>引っ張て来たjson文字列4</p>");

やばい、なんかアホっぽいことしてる感MAXだ・・・

フォロワーからの天の声

Knockout.jsとか
AngularJSあるで
Vue.jsとかどうよ

短い名前のVue.jsでいいか（適当）

Vue.jsを使う

f:id:patioglass:20150307204940j:plain

なんか良い感じにデータバインディングとかしてくれるらしい。

MVVMなフレームワークらしいけどそもそもMVCすらまともにやってないのでとりあえず動けばいい的なノリで組む。

<div class="wrapper">
   <ul>
     <li v-repeat="json">
       {{test}}
     </li>
   </ul>
</div>

var test=new Vue({
        el:".wrapper",
        data:{
            json:[]
        },
        methods:{
            /*初期化処理*/
            init:function(){
                $.getJSON("hoge.json",function(data){
                   $.each(data,function(i,value){
　　　　　　　　　　　　test.$data.json.push({test:value}); 
　　　　　　　　　　　});
                });
            }
        },
        created:function(){
            this.init();
        }
    });