Meteor入門の第二回はサーバサイドのデータ保存であるMongoDBを使ってみたいと思います。
私の場合はMeteor初心者かつMongoDB初心者なので簡単なマスタメンテ作りながら
CLADの中でMongoDBのコマンドを覚えました。
簡単な概要はmeteor公式ドキュメントにも
記載されていますが、詳細な内容は当然MongoDB公式マニュアルを読んだ方が良いです。
（meteor側にも詳細はMongoDBのリファレンスを…と記載されています。）
※いくつかmeteor経由だとエラーになる関数があったので注意してください！取得数を制御するlimitとか…
簡単にRDBのSQLとの対比だけ言いますと、
- select → find
- insert → insert
- update → update
- delete → remove
となっており、いづれも簡単な配列で検索クエリやオプションを渡すだけです。
MongoDBはクライアント操作がリアルタイムでMongoDBに反映され、全ユーザに伝播されます。
流れで言うと、
ユーザＡがDB操作→ローカルデータ（miniMogo）を変更→サーバサイドのMongoDBを変更→
各ユーザのローカルデータ（miniMngo）を同期→pushで各ユーザのブラウザにリロードを要求
となります。（これはまた後ほど図に起こします。）
今回はソースを見た方が早いと思うので下にhtmlとjsのソースコードを全て載せておきます。
一点、MongoDBとは直接関係なくハマったのが、前回にテンプレートエンジンのバインドは
{{> テンプレート名}}と記述すると掲載しました。
これは間違っていないのですがバインドがネストしてその最終階層でbeanデータから
各プロパティをバインドする場合は{{変数名}}となります。
（以下の例で言うとitemテンプレートのcodeとname）
itemlist.html
<head>
<title>chat</title>
</head>
<body>
{{> editview}}
<hr>
{{> listview}}
</body>
<template name="editview">
<input type="button" id="save" name="save" value="登録"><br>
<table>
<tr>
<th>
<label>商品コード</label>
</th>
<td>
<input type="text" id="item-code" name="item-code" size="40" style="ime-mode: disabled;">
</td>
</tr>
<tr>
<th>
<label>商品名称</label>
</th>
<td>
<textarea id="item-name" name="item-name" rows="4" cols="40"></textarea>
</td>
</tr>
</table>
</template>
<template name="listview">
<b><label>商品一覧</label></b>
<table border="1">
<tr>
<th>
<label>商品コード</label>
</th>
<td>
<label>商品名称</label>
</td>
</tr>
{{#each itemList}}
{{> item }}
{{/each}}
</table>
<input type="button" id="delete" name="delete" value="全件削除">
</template>
<template name="item">
<tr>
<th>
{{code}}
</th>
<td>
{{name}}
</td>
</tr>
</template>
itemlist.js
//全商品のリストを作成
ItemList = new Meteor.Collection("itemlist");
//既存の商品リストとのバリデーション
ItemList.validate = function(item){
if(item.code == null || item.code == ""){
return false;
}
return true;
}
//クライアント側処理
if (Meteor.isClient) {
//登録部
Template.editview.events({
'click #save' : function(){
var item = {code : jQuery("#item-code").val(),
name : jQuery("#item-name").val()};
if(!ItemList.validate(item)){
alert("---- no item code ----");
return;
}
var dbData = ItemList.findOne({code:item.code});
//同一コードの存在チェック
//存在すれば商品名をupdate、無ければinsert
if(dbData != null){
ItemList.update({code:item.code}, {$set: {name:item.name}});
}else{
ItemList.insert({code:item.code, name:item.name});
}
}
});
//リスト部
Template.listview.events({
'click #delete' : function(){
ItemList.remove({});
alert("---- all items were deleted ----");
}
});
Template.listview.itemList = function(){
return ItemList.find({});
}
}
//サーバ側処理
if (Meteor.isServer) {
Meteor.startup(function () {
});
}
potter0517 