�ݺ�ߣ

@MALAGANT
WWW.RAILS-EXPERTS.COM
SINGLE UND TROTZDEM GLÜCKLICH
- EINE EINFÜHRUNG IN METEOR

SINGLE PAGE APPS MIT
JAVASCRIPT

PRINZIPIEN
• Client renderd HTML
• Datenaustausch DDP
• Javascript für alles (Client,
Server, Datenbank)
• Latency Compensation
• Reactive Apps
• MongoDB

CURL HTTPS://
INSTALL.METEOR.COM/ | SH

APP GENERIEREN
• meteor create todos
• cd todos
• meteor

VIEWS MIT SPACEBARS
TEMPLATES = HTML + SPACEBARS
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>

JAVASCRIPT
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "Aufstehen" },
{ text: "Zähneputzen" },
{ text: "Duschen" }
]
});
}

HTML DATEIEN
DEFINIEREN TEMPLATES

TODOS IN COLLECTIONS
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
// This code only runs on the client
tasks: function () {
return Tasks.find({});
}
});
}

MONGO CONSOLE
db.tasks.insert({
text: "Hello world!",
createdAt: new Date()
});

EINGABEFORMULAR HINZUFÜGEN
<form class="new-task">
<input type="text"
name="text"
placeholder="Type to add new tasks" />
</form>

EVENTS
Template.body.events({
"submit .new-task": function (event) {
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date() // current time
});
// Clear form
event.target.text.value = "";
// Prevent default form submit
return false;
}
});

SORTIEREN
return Tasks.find({}, {sort: { createdAt: -1}});
}
});

LÖSCHEN UND ERLEDIGEN VON TASKS
<template name="task">
<li class="{{#if checked}}checked{{/if}}">
<button class="delete">×</button>
<input type="checkbox"
checked="{{checked}}"
class="toggle-checked" />
<span class="text">{{text}}</span>
</li>
</template>

LÖSCHEN UND ERLEDIGEN VON TASKS
Template.task.events({
"click .toggle-checked": function () {
Tasks.update(this._id, {$set: {checked: !
this.checked}});
},
"click .delete": function () {
Tasks.remove(this._id);
}
});

DEPLOYMENT AUF METEOR.COM
• meteor deploy todo-wjax2014.meteor.com

MOBILE: ANDROID
$ meteor install-sdk android
$ meteor add-platform android
$ meteor run android

MOBILE: IOS
$ meteor install-sdk ios
$ meteor add-platform ios
$ meteor run ios

SESSION DATA FÜR DAS UI
<label class="hide-completed">
<input type="checkbox"
checked="{{hideCompleted}}" />
Hide Completed Tasks
</label>

EVENTHANDLING
"change .hide-completed input": function (event) {
Session.set("hideCompleted", event.target.checked);
}

UPDATE DER HELPER
if (Session.get("hideCompleted")) {
// If hide completed is checked, filter tasks
return Tasks.find({checked: {$ne: true}}, {sort: {createdAt: -1}});
} else {
// Otherwise, return all of the tasks
return Tasks.find({}, {sort: {createdAt: -1}});
}
},
hideCompleted: function () {
return Session.get("hideCompleted");
}
});

INCOMPLETE INDICATOR
incompleteCount: function () {
return Tasks.find({checked: {$ne: true}}).count();
}
<h1>Todo List ({{incompleteCount}})</h1>

LATENCY COMPENSATION
• Meteor schickt Daten an MongoDB
• Client geht davon aus, dass alles ok ist und zeigt das
Ergebnis vorher schon an.

RESSOURCEN
• https://www.discovermeteor.com/
• https://www.meteor.com/
• https://www.yauh.de/articles/376/best-learning-resources-
for-meteorjs/

�ݺ�ߣ

Einführung in Meteor

More Related Content

Einführung in Meteor