MeteorJS - Les Bases
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Les Bases
Développeur passioné
/client
/server
/lib
/public
Chargé uniquement côté client
if (Meteor.isClient) {
...
}
Chargé uniquement côté serveur
if (Meteor.isServer) {
...
}Chargé avant le démarrage de l'application
Clicks = new Meteor.Collection('clicks')<head>
<title>demo</title>
</head>
<body>
<h1>Welcome to ClickLand!</h1>
{{> hello}}
</body>
<template name="hello">
<form name="clickForm">
<input name="username" type="text">
<button>Click Me</button>
</form>
<h2>Clickers List</h2>
<span class="position title">Position</span>
<span class="username title">Username</span>
<span class="counter title">Counter</span>
<br/>
{{#each allClicks}}
<span class="position">{{@index}}</span>
<span class="username">{{username}}</span>
<span class="counter">{{counter}}</span>
<br/>
{{/each}}
</template>Template.hello.helpers({
allClicks: function () {
return Clicks.find();
}
});
Template.hello.events({
'submit form[name="clickForm"]': function (event) {
event.preventDefault();
var username = event.target.username.value;
if (!username) { return ;}
var previousClick = Clicks.findOne({username: username});
if (previousClick) {
Clicks.update(
{_id: previousClick._id},
{$set:
{counter: previousClick.counter+1}
}
);
} else {
Clicks.insert({
username: username,
counter: 0
});
}
}
});
/* CSS declarations go here */
.username, .counter, .position {
display: inline-block;
width: 125px;
}
.title {
font-weight: bold;
}
