はじめてのMeteor
33
はじめてのMeteor Meteor Oita ♨
-
Upload
katsumi-honda -
Category
Software
-
view
139 -
download
0
Transcript of はじめてのMeteor
はじめてのMeteor
MeteorOita♨
公式サイトのチュートリアル
h+ps://www.meteor.com/
プロジェクトを作る
meteorcreatesimple-todos
cdsimple-todosmeteor
「simple-todos」ってフォルダができて、その中にファイルができています
実行してみる
ブラウザで h+p://localhost:3000/にアクセスしてみて。
htmlを編集してみて
htmlを編集して保存したら、ブラウザの画面どうなってる？
これが
ホットコードプッシュ
だ！！
ES2015
MeteorではES2015(以前ES6とか呼ばれてた）の多くの機能が使えます。ES2015便利なので、慣れていきましょう J
client/main.html
<head><Ctle>simple</Ctle></head>
ファイルをいろいろ作ります
• imports/ui/body.html• imports/ui/body.js• client/main.js
imports/ui/body.html<body><divclass="container"><header><h1>TodoList</h1></header><ul>{{#eachtasks}}{{>task}}{{/each}}</ul></div></body><templatename="task"><li>{{text}}</li></template>
imports/ui/body.js
import{Template}from'meteor/templaCng';import'./body.html';Template.body.helpers({tasks:[{text:'Thisistask1'},{text:'Thisistask2'},{text:'Thisistask3'},],});
client/main.js
import'../imports/ui/body.js';
こんな状態
imports/ui/body.html<body><divclass="container"><header><h1>TodoList</h1></header><ul>{{#eachtasks}}{{>task}}{{/each}}</ul></div></body><templatename="task"><li>{{text}}</li></template>
bodyタグはjsからTemplate.bodyで参照できる
{{#each}}で繰り返し
{{>task}}taskテンプレートを表示する
繰り返しの終わり
taskテンプレート
{{text}}で tasksのtextを表示
imports/ui/body.js
import{Template}from'meteor/templaCng';import'./body.html';Template.body.helpers({tasks:[{text:'Thisistask1'},{text:'Thisistask2'},{text:'Thisistask3'},],});
Meteorのモジュールを読み込み
テンプレートhtmlの読み込み
bodyタグ用のヘルパー
tasksという名前でオブジェクトの配列を返す{{#eachtasks}}でこの配列を繰り返すtaskテンプレートの{{text}}でオブジェクトのtextを表示
client/main.js
import'../imports/ui/body.js'; body.jsを読み込んで実行
client/main.jsはブラウザで動くコードのエントリーポイント（最初に動き出す場所）になります
spacebars{{#if真偽値}}{{else}}{{/if}}{{#each}}{{/each}}{{何か表示}}{{{HTMLを含む内容を表示}}}
client/simple-todos.css
チュートリアルのCSSをコピペ
todoをDBで管理
MeteorではDBにMongoDBを使います（将来、MySQLなどのRDBもサポート予定）
imports/api/tasks.jsimport{Mongo}from'meteor/mongo';exportconstTasks=newMongo.CollecCon('tasks');
server/main.jsimport'../imports/api/tasks.js'; 2行目あたりに追加
imports/ui/body.js
import{Template}from'meteor/templaCng';import{Tasks}from'../api/tasks.js';import'./body.html';Template.body.helpers({tasks(){returnTasks.find({});},});
ブラウザの画面
からっぽになっちゃった！
MongoDBを操作する
ターミナル等で、プロジェクトのフォルダでmeteormongoを実行すると、MongoDBの操作ができます
db.tasks.insert({text:"Helloworld!",createdAt:newDate()});
MongoDBにデータ追加したら、ブラウザの画面どうなってる？
これが
リアクティブなライブアップデート
だ！！
画面からタスクを追加する
ブラウザの画面からタスクを追加できるようにしていきます。
imports/ui/body.html
<divclass="container"><header><h1>TodoList</h1><formclass="new-task"><inputtype=“text”name=“text”placeholder=“タスクを入力"/></form></header><ul>
imports/ui/body.jsTemplate.body.events({'submit.new-task'(event){//ブラウザ標準のsubmitイベントをキャンセルevent.preventDefault();//フォームの値を取得consttarget=event.target;consttext=target.text.value;//MongoDBのコレクションにデータを追加Tasks.insert({text,createdAt:newDate(),//currentCme});//フォームの内容を初期化target.text.value='';},});
Template.body.helpersの下あたりに追加
動かしてみましょう
文字を入力したら、タスクがどんどん追加されます
新しいのを最初に表示
imports/ui/body.jsを変更するTemplate.body.helpers({tasks(){//ShownewesttasksatthetopreturnTasks.find({},{sort:{createdAt:-1}});},});
チェックと削除
imports/ui/task.htmlを追加
<templatename="task"><liclass="{{#ifchecked}}checked{{/if}}"><bu+onclass="delete">&Cmes;</bu+on><inputtype="checkbox"checked="{{checked}}"class="toggle-checked"/><spanclass="text">{{text}}</span></li></template>
imports/ui/body.htmlのtaskテンプレートは削除
imports/ui/task.jsを追加
import{Template}from'meteor/templaCng';import{Tasks}from'../api/tasks.js';import'./task.html';Template.task.events({'click.toggle-checked'(){//SetthecheckedpropertytotheoppositeofitscurrentvalueTasks.update(this._id,{$set:{checked:!this.checked},});},'click.delete'(){Tasks.remove(this._id);},});
imports/ui/body.js
import{Tasks}from'../api/tasks.js';import'./task.js';import'./body.html';Template.body.helpers({
追加
iOS、Androidデモ
とりあえずここまで
チュートリアルの続きもがんばってね
