FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
•
0 gefällt mir•1,125 views
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
Ähnlich wie FrontendLab: Meteor js: Быть или не Быть- Александр Биденко (20)
Mehr von GeeksLab Odessa
Mehr von GeeksLab Odessa (20)
FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
- 1. Meteor.js, быть или не быть ? Биденко Александр
- 4. Семь китов Meteor ● Чистый JS ● Живые обновления страниц(реактивность) ● Чистая, мощная синхронизация данных ● Компенсация задержки ● Горячая замена кода ● Своя система пакетов ● Простота равна продуктивности
- 5. Система пакетов ● Core packages ● Meteor smart packages ● Atmosphere smart packages
- 6. Работа с пакетами Meteor
- 7. $ meteor add packageName
- 8. $ sudo npm install -g meteorite
- 9. $ sudo npm install -g meteorite $ mrt add foundation-5
- 10. Одним едины
- 11. Один код на сервере и клиенте Meteor.isClient Meteor.isServer
- 12. Один код на сервере и клиенте if (Meteor.isClient) { //client code } if (Meteor.isServer) { //server code Meteor.startup(function () { // code to run on server at startup }); }
- 13. В качестве шаблонизатора Meteor использует Пока нельзя заменить, обещают только в v 1.0
- 14. И наш шаблон <head> <title>страничка</title> </head> <body> {{> hello}} </body> <template name="hello"> <h1>Some Text</h1> {{greeting}} <input type="button" value="Click" /> </template>
- 16. Players = new Meteor.Collection("players"); if (Meteor.isClient) { Template.leaderboard.players = function () { return Players.find({}, {sort: {score: -1, name: 1}}); }; Template.leaderboard.selected_name = function () { var player = Players.findOne(Session.get("selected_player")); return player && player.name; }; Template.player.selected = function () { return Session.equals("selected_player", this._id) ? "selected" : ''; }; Template.leaderboard.events({ 'click input.inc1': function () { Players.update(Session.get("selected_player"), {$inc: {score: 5}}); } }); Template.player.vents({ 'click': function () { Session.set("selected_player", this._id); } }); } // On server startup, create some players if the database is empty. if (Meteor.isServer) { Meteor.startup(function () { if (Players.find().count() === 0) { var names = ["Ada Lovelace", "Grace Hopper", "Marie Curie", "Carl Friedrich Gauss", "Nikola Tesla", "Claude Shannon"]; for (var i = 0; i < names.length; i++) Players.insert({name: names[i], score: Math.floor(Random.fraction()*10)*5}); } }); }
- 17. <head> <title>Leaderboard</title> </head> <body> <div id="outer"> {{> leaderboard}} </div> </body> <template name="leaderboard"> <div class="leaderboard"> {{#each players}} {{> player}} {{/each}} </div> {{#if selected_name}} <div class="details"> <div class="name">{{selected_name}}</div> <input type="button" class="inc1" value="Give 5 points" /> </div> {{else}} <div class="none">Click a player to select</div> {{/if}} </template> <template name="player"> <div class="player {{selected}}"> <span class="name">{{name}}</span> <span class="score">{{score}}</span> </div> </template>
- 18. Всем спасибо ! Дополнительная информация : https://www.meteor.com/ http://meteorhacks.com/