![JAVASCRIPT
if (Meteor.isClient) {
// This code only runs on the client
Template.body.helpers({
tasks: [
{ text: "Aufstehen" },
{ text: "Zähneputzen" },
{ text: "Duschen" }
]
});
}](https://image.slidesharecdn.com/meteortutorial-141107031924-conversion-gate02/85/Einfuhrung-in-Meteor-9-320.jpg)
Einführung in Meteor
- 1. @MALAGANT WWW.RAILS-EXPERTS.COM SINGLE UND TROTZDEM GLÜCKLICH - EINE EINFÜHRUNG IN METEOR
- 3. SINGLE PAGE APPS MIT JAVASCRIPT
- 4. PRINZIPIEN • Client renderd HTML • Datenaustausch DDP • Javascript für alles (Client, Server, Datenbank) • Latency Compensation • Reactive Apps • MongoDB
- 7. APP GENERIEREN • meteor create todos • cd todos • meteor
- 8. 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>
- 9. JAVASCRIPT if (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ tasks: [ { text: "Aufstehen" }, { text: "Zähneputzen" }, { text: "Duschen" } ] }); }
- 10. HTML DATEIEN DEFINIEREN TEMPLATES
- 11. TODOS IN COLLECTIONS Tasks = new Mongo.Collection("tasks"); if (Meteor.isClient) { // This code only runs on the client Template.body.helpers({ tasks: function () { return Tasks.find({}); } }); }
- 12. MONGO CONSOLE db.tasks.insert({ text: "Hello world!", createdAt: new Date() });
- 13. EINGABEFORMULAR HINZUFÜGEN <form class="new-task"> <input type="text" name="text" placeholder="Type to add new tasks" /> </form>
- 14. 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; } });
- 15. SORTIEREN Template.body.helpers({ tasks: function () { return Tasks.find({}, {sort: { createdAt: -1}}); } });
- 16. 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>
- 17. 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); } });
- 18. DEPLOYMENT AUF METEOR.COM • meteor deploy todo-wjax2014.meteor.com
- 19. MOBILE: ANDROID $ meteor install-sdk android $ meteor add-platform android $ meteor run android
- 20. MOBILE: IOS $ meteor install-sdk ios $ meteor add-platform ios $ meteor run ios
- 21. SESSION DATA FÜR DAS UI <label class="hide-completed"> <input type="checkbox" checked="{{hideCompleted}}" /> Hide Completed Tasks </label>
- 22. EVENTHANDLING "change .hide-completed input": function (event) { Session.set("hideCompleted", event.target.checked); }
- 23. UPDATE DER HELPER Template.body.helpers({ tasks: function () { 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"); } });
- 24. INCOMPLETE INDICATOR incompleteCount: function () { return Tasks.find({checked: {$ne: true}}).count(); } <h1>Todo List ({{incompleteCount}})</h1>
- 25. LATENCY COMPENSATION • Meteor schickt Daten an MongoDB • Client geht davon aus, dass alles ok ist und zeigt das Ergebnis vorher schon an.
- 26. RAN AN DEN SPECK
- 27. RESSOURCEN • https://www.discovermeteor.com/ • https://www.meteor.com/ • https://www.yauh.de/articles/376/best-learning-resources- for-meteorjs/