Download as PDF, PPTX
![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});
}
});
}](https://image.slidesharecdn.com/meteorjs-140123120139-phpapp01/75/FrontendLab-Meteor-js-16-2048.jpg)
Uploaded byGeeksLab Odessa
FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
Документ обсуждает возможности и функции фреймворка Meteor.js, включая реактивные обновления страниц, синхронизацию данных и систему пакетов. Примеры кода демонстрируют создание и управление коллекцией 'players' в Meteor, а также работу с шаблонами. Дополнительные ресурсы предоставлены для дальнейшего изучения фреймворка.
FrontendLab: Meteor js: Быть или не Быть- Александр Биденко
- 1. Meteor.js, быть илине быть ? Биденко Александр
- 3.
- 4. Семь китов Meteor ● ЧистыйJS ● Живые обновления страниц(реактивность) ● Чистая, мощная синхронизация данных ● Компенсация задержки ● Горячая замена кода ● Своя система пакетов ● Простота равна продуктивности
- 5. Система пакетов ● Core packages ● Meteorsmart packages ● Atmosphere smart packages
- 6. Работа с пакетамиMeteor
- 7. $ meteor addpackageName
- 8. $ sudo npminstall -g meteorite
- 9. $ sudo npminstall -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>
- 15.
- 16. Players = newMeteor.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> <templatename="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/