I have the 2 following templates which I am trying to bind functions to. As you can see it's a simple app to add objects with names and scores into its mongoDB.
Here is the HTML File:
<head>
<title>Leaderboard</title>
</head>
<body>
<h1>Leaderboard</h1>
{{> leaderboard}}
<br /><br />
{{>addPlayerForm}}
</body>
<template name="leaderboard">
<ul>
{{#each player}}
<li class="player {{selectedClass}}"> {{name}} : {{score}} </li>
{{/each}}
</ul>
<ul>
{{#if showSelectedPlayer}}
<li> Selected Player: {{showSelectedPlayer.name}} </li>
{{/if}}
</ul>
<input type="button" class="increment" value="Give 5 Points"/>
<input type="button" class ="decrement" value="Minus 5 Points"/>
</template>
<template name="addPlayerForm">
<form class="add-form">
<input type="text" name="PlayerName" placeholder="Add player name here" />
<input type="submit" name="Add Player" />
</form>
</template>
Complete JS File:
PlayersList = new Mongo.Collection('Players');
console.log(PlayersList);
if(Meteor.isClient){
Template.leaderboard.helpers({
'player': function(){
return PlayersList.find( )
},
'selectedClass':function(){
var playerId=this._id;
var selectedPlayer=Session.get('selectedPlayer');
if (playerId==selectedPlayer){
return "selected"
}
},
'showSelectedPlayer':function(){
var selectedPlayer = Session.get('selectedPlayer');
return PlayersList.findOne(selectedPlayer)
}
});
Template.leaderboard.events({
'click .player':function(){
var playerID = this._id; //this refer to the current context:playerclicked
Session.set('selectedPlayer', playerID);
var selectedPlayer = Session.get('selectedPlayer');
console.log(selectedPlayer);
},
'click .increment':function(){
var selectedPlayer = Session.get('selectedPlayer');
PlayersList.update(selectedPlayer,{$inc:{score:5}});
},
'click .decrement':function(){
var selectedPlayer = Session.get('selectedPlayer');
PlayersList.update(selectedPlayer,{$inc:{score:-5}});
}
});
Template.addPlayerForm.events({
'submit form': fucntion(event){
event.preventDefault();
var PlayerNameVar = event.target.PlayerName.value;
console.log(PlayerNameVar);
PlayersList.insert({
name:PlayerNameVar,
score:0
});
}
});
}
if(Meteor.isServer){
console.log("Hello Server!");
}
This is the error:
While processing files with ecmascript (for target web.browser):
main.js:38:34: Unexpected token, expected "," (38:34)
While processing files with ecmascript (for target os.windows.x86_32):
main.js:38:34: Unexpected token, expected "," (38:34)
Line 38 is in Template.addPlayerForm.events:
'submit form': fucntion(event){
As Ankit has found out, you need to correct the typo. It is function, also I suggest you use editors like Sublime, Atom or VS CODE to get rid of such typos.
Related
this is my code(i don't know where is the error for two days already.). And when I put .task and .Done helpers it won't show templates anymore. I know I have an error somewhere but I cannot pin point it for two days already. What I want is to pull tasks from database run them trough filter. Thank you in advance for your help.
<template name="Done">
<li>
<div>
<span class="text">{{title}}</span>
</div>
</li>
</template>
<template name="task">
<li>
<button class="completed">Completed</button>
<!--<li><input type="text" name="task" class="edit"></li>!-->
<span class="text" onclick="true">{{title}}</span>
<button class="saveItem">Save</button><button class="cancelItem">Cancel</button>
<button class="editItem">Edit</button><button class="delete">Delete</button>
</li>
<div>
<h1>To do list</h1>
<ul>
{{#each tasks}}
{{>task}}
{{/each}}
</ul>
</div>
<div>
<h1>Done list</h1>
<ul>
{{#each tasks}}
{{>Done}}
{{/each}}
</ul>
</div>
.js file
Meteor.subscribe("tasks");
Template.body.helpers({
tasks: function(){
return Tasks.find();
}});
Template.Done.helpers({
taskDone: function () {
return Tasks.find({}, {fields: {completed: "yes"}});
}
});
Template.task.helpers({
taskNotDone: function(){
return Tasks.find({completed: "no"});
}
});
Meteor.publish("tasks", function () {
return Tasks.find({});
});
First of all, I strongly recommend to store the completed field as Boolean values instead of String values. Secondly, the helper functions taskDone and taskNotDone should belong to the body template. In addition, the fields modifier is usually used to limit certain fields for publishing and not for querying documents.
For example, if you want to publish all tasks, minus the completed info, the publish function would look like this:
Meteor.publish("tasks", function () {
return Tasks.find({}, {fields: {completed: 0}});
});
Instead, if you want to return only Tasks documents which have been completed, you would have the following query:
Tasks.find({completed: true});
This code may fix your problem:
<body>
<div>
<h1>To do list</h1>
<ul>
{{#each tasksToDo}}
{{>task}}
{{/each}}
</ul>
</div>
<div>
<h1>Done list</h1>
<ul>
{{#each taskDone}}
{{>done}}
{{/each}}
</ul>
</div>
</body>
<template name="done">
<li>
<div>
<span class="text">{{title}}</span>
</div>
</li>
</template>
<template name="task">
<li>
<button class="completed">Completed</button>
<span class="text" onclick="true">{{title}}</span>
<button class="saveItem">Save</button>
<button class="cancelItem">Cancel</button>
<button class="editItem">Edit</button>
<button class="delete">Delete</button>
</li>
</template>
if (Meteor.isClient) {
Template.body.helpers({
tasksToDo: function() {
return Tasks.find({
completed: false
});
},
taskDone: function() {
return Tasks.find({
completed: true
});
}
});
}
Here's a MeteorPad.
I've got this html in my Meteor project:
<head>
<title>The Dentist Hurt My Fillings</title>
</head>
<body>
<h2>Thirteen Ways of Looking at a Duckbilled Platypus</h2>
<br/>
<br/>
<div class="container">
{{> whizzardBlizzard}}
</div>
</body>
<template name="whizzardBlizzard">
<form>
{{#if firstStep}}
{{> firstStepTemplate}}
{{/if}}
{{#if secondStep}}
{{> secondStepTemplate}}
{{/if}}
{{#if thirdStep}}
{{> thirdStepTemplate}}
{{/if}}
<input type="submit" value="Submit" class="button">
</form>
</template>
<template name="firstStepTemplate">
<h2>Step 1</h2>
</template>
<template name="secondStepTemplate">
<h2>Step 2</h2>
</template>
<template name="thirdStepTemplate">
<h2>Step 3</h2>
</template>
...and this Javascript:
if (Meteor.isClient) {
// stepNum starts at 1
Session.setDefault('stepNum', 1);
Template.whizzardBlizzard.events({
"submit form": function (event) {
//event.preventDefault();
// save the vals to a new document in a collection
Session.set('stepNum', Session.get('stepNum') + 1);
}
});
Template.whizzardBlizard.helpers({
'firstStep': function() {
return (Session.get('stepNum') == 1);
},
'secondStep': function() {
return (Session.get('stepNum') == 2)
},
'thirdStep': function() {
return (Session.get('stepNum') == 3)
}
// . . . etc.
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}
When I try to run it, I get, "Uncaught TypeError: Cannot read property 'helpers' of undefined"?
How could that be? Template helpers are a key component of Meteor, and examples of its usage mirror mine.
I have tried it both with and without encasing the helper name (such as "firstStep") in single quotes; that is, I've tried both this:
firstStep: function() {
..and this:
'firstStep': function() {
...while calling it like so:
{{#if firstStep}}
{{> firstStepTemplate}}
{{/if}}
So why is 'helpers' reportedly unreadable?
Blizzard in your helper only has one "z": Blizard
I'm doing some intro Meteor stuff, and I'm having trouble getting the correct values from my Collection. I'm trying to track ownership of the central site, as claimed by a button. The program is currently just an extension of the Try Meteor task tutorial. Anyways, here's the HTML and JS:
--------------HTML------------
<head>
<title>Todo List</title>
</head>
<body>
<div class="container">
<header>
<h1>Todo List</h1>
<form class="new-task">
<input type="text" name="text" placeholder="Type to add new tasks" />
</form>
{{> ownerclaim}}
<h4>Current owner: {{ownerget}}</h4>
</header>
<u1>
{{#each tasks}}
{{> task}}
{{/each}}
</u1>
{{> loginButtons}}
</div>
</body>
<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>
<template name="ownerclaim">
<button class="claim">Claim website</button>
</template>
<template name="ownership">
<span class="text">{{text}}</span>
</template>
-----------JS---------------
OwnerC = new Mongo.Collection("owner");
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
Meteor.subscribe("own");
console.log(OwnerC.findOne({}));
Session.set("currentOwner", OwnerC.findOne({}));
Template.body.helpers({
tasks: function () {
return Tasks.find({}, {sort: {createdAt: -1}});
},
ownerget: function () {
console.log("JOHNNN");
console.log(Session.get("currentOwner"));
return Session.get("currentOwner");
}
});
Template.body.events({
"submit .new-task": function (event) {
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date(),
owner: Meteor.userId(),
username: Meteor.user().username
});
event.target.text.value = "";
return false;
}
});
Template.task.events({
"click .toggle-checked": function() {
Tasks.update(this._id, {$set: {checked: ! this.checked}});
},
"click .delete": function() {
Tasks.remove(this._id);
}
});
Template.ownerclaim.events({
"click .claim": function() {
OwnerC.update({}, {$set: {text: Meteor.user._id}});
}
})
Accounts.ui.config({
passwordSignupFields: "USERNAME_ONLY"
});
}
if(Meteor.isServer) {
console.log("YOYOYOYOYOYO");
Meteor.startup( function(){
console.log("YOYO");
OwnerC.insert({
text: "none",
createdAt: new Date(),
owner: "0",
username: "0"
});
console.log(OwnerC.findOne({}));
Meteor.publish("own", function() {
return OwnerC.find({});
});
});
}
For some reason, my server logs are showing OwnerC to contain the object, but the client logs are showing it as an empty Collection, and findOne in the client is returning undefined. Anyone know where I'm going wrong?
IM trying out Meteor ToDo-list tutorial but I have problem where I have a form and I should be able to insert the values into the database but it doesn't work. When I hit enter nothing happens.
Here my my html:
<head>
<title>Todo list</title>
</head>
<body>
<div class="container">
<header>
<h1>Tee asjad ära!</h1>
<form class="new-task">
<input type="text" placeholder="Type to add new tasks" />
</form>
</header>
<ul>
{{#each tasks}}
{{> task}}
{{/each}}
</ul>
</div>
</body>
<template name="task">
<li>{{text}}</li>
</template>
here is the .js file:
Tasks = new Mongo.Collection("tasks");
if (Meteor.isClient) {
//see kood jookseb ainult kliendipoolel
Template.body.helpers({
tasks: function () {
return Tasks.find({});
}
});
Template.body.events({
"submit .new-task": function (event) {
var text = event.target.text.value;
Tasks.insert({
text: text,
createdAt: new Date()
});
event.target.text.value = "";
return false;
}
});
}
When I enter values from command line to the database it works fine.
Your input is missing name="text", which is the attribute that lets you access the value through event.target.text.value.
Were you getting an error in the JavaScript console in your browser?
I have a templates:
<div id="search">
{{> search}}
</div>
<div id="bookmarks-container">
{{> bookmarks}}
</div>
<template name="bookmarks">
{{#each bookmarks}}
<div class="bookmark">
{{URL}}
</div>
{{/each}}
</template>
<template name="search">
<input type="text" id="search" value="" />
</template>
And I have a code to get bookmarks:
bookmarks = new Meteor.Collection("Bookmarks");
if (Meteor.isClient) {
Template.bookmarks.bookmarks = function() {
var s = $('#search').text();
alert(s);
if (s === '')
return bookmarks.find({});
else
return bookmarks.find({tags : 'some_tag'});
};
I want to display all bookmarks if #search text field is empty and filter my bookmarks if it is not.
As I see Template.bookmarks.bookmarks calls only once - when page loaded in the browser. How can I call this method every time when user press the button in the #search text input:
Template.search.events({
'keyup #search' : function(e,t) {
// ....
}
Thanks in advance.
Relay the data with Session
var s = Session.get("query");
and
Template.search.events({
'keyup #search' : function(e,t) {
Session.set("query",t.find('#search').value);
}
On its own the template bookmarks helper wouldn't know when to refresh the data. Using Session tells it that the query variable/hash is reactive.