Meteor entering route when calling a method - javascript

Can someone explain to me why when I have collections code inside router will cause the route to be called when a method is called?
Consider the following code:
home.html
<template name="home">
{{ duplicate }}
<form>
<input type="text" name="test" value="somevalue">
<input type="submit" value="Submit">
</form>
</template>
script.js
Template.home.events({
'submit form': function (e) {
e.preventDefault();
console.log('Enter Meteor call');
Meteor.call('createDoc', { 'test': e.target.test.value });
}
});
route.js
Router.onBeforeAction(function () {
console.log('Enter onBeforeAction');
$('#loading').show();
this.next();
});
Router.route('/', function () {
console.log('Enter action');
var foo = collection.findOne({ test: 'somevalue' }) ? 'true' : 'false';
this.render('home', {
data: {
'duplicate' : foo
}
});
Template.home.rendered = function () {
console.log('Enter rendered');
$('#loading').hide();
};
});
methods.js
collection = new Mongo.Collection('collection');
Meteor.methods({
createDoc: function (data) {
console.log('Enter createDoc');
collection.insert(data);
}
});
The problem is that if I press submit on the form, after the method is called the router will activate, even though e.preventDefault() presents. The console log shows this behaviour clearly:
"Enter Meteor call" script.js:4:3
"Enter createDoc" methods.js:5:3
"Enter onBeforeAction" routes.js:2:2
"Enter action" routes.js:8:2
"Enter onBeforeAction" routes.js:2:2
"Enter action" routes.js:8:2
Furthermore, you can see that the router is called twice and that it never enters Template.home.rendered. This causes the loading div to appear and never leaves. I can confirm that data are being inserted correctly.
If I remove collection.findOne() in routes.js, however, this behaviour will disappear and everything works as expected.
Questions
Why is the route being called only when I have collection.findOne() inside the route?
Why collection.findOne({ test: 'somevalue' }) never returns anything inside the route? (I know how I can get around this by using Session variables and helpers in script.js, but I want to know exactly why)
This is causing a lot of unexpected behaviour in my app. Thank you very much in advance.

As answered by others the problem you have arises from the fact that Meteor will reactively re-run code that runs in a reactive context, if and only if, that code issues a call to a reactive data source.
In your case, the call to findOne is a call to a reactive data source and the context in Router.route('/', function () { // context }); is a reactive context.
There are two important tools that let you control this behavior: one is good design. Be aware of the reactivity and try to design your code around it.
The other is checking Tracker.active and using Tracker.nonreactive to avoid reactivity inside a reactive data context.
This should answer your first question. As to why your findOne query never finds anything: have you published the data from the server to the client? Please check out Publish-Subscribe. You basically need:
// on the server
Meteor.publish('myPublication', function(author) {
return collection.find();
});
// on the client
Meteor.subscribe('myPublication');

The call to collection.findOne() inside the route is listening to any new changes on the database, every time text is saved on the database the query is run.
A possible solution:
Router.js
Router.onBeforeAction(function () {
console.log('Enter onBeforeAction');
$('#loading').show();
this.next();
});
Router.route('/', {
template: 'home',
waitOn: function() {
return Meteor.subscribe('collection');
},
data: function() {
var foo = collection.findOne({ test: 'somevalue' }) ? 'true' : 'false';
return {
'duplicate': foo
};
},
action: function() {
this.render();
}
});
And a publish file on server/publish.js
Meteor.publish('collection', function () {
return collection.find();
});
I hope this can help you solving your problem.
Best.

Related

Meteor Iron Router WaitOn Subscription

I am really struggling with waiting on a subscription to load for a specific route before returning the data to the template. I can see on from the publish on the server that a document is found, but on the client there is no document.
If I do a find().count() on the publish, it shows 1 document found, which is correct, but when I do the count on the subscription, it shows 0 documents.
I have tried a number of different methods, like using subscriptions:function() instead of waitOn:function(), but nothing works.
Collections.js lib:
SinglePackage = new Mongo.Collection("SinglePackage");
SinglePackage.allow({
insert: function(){
return true;
},
update: function(){
return true;
},
remove: function(){
return true;
}
});
Publications.js server:
Meteor.publish("SinglePackage", function(pack_id) {
return Packages.find({shortId: pack_id});
});
Iron Router:
Router.route('/package/:id', {
name: 'package.show',
template: 'Package_page',
layoutTemplate: 'Landing_layout',
waitOn: function() {
return Meteor.subscribe('SinglePackage', this.params.id);
},
data: function() {
return SinglePackage.find();
},
action: function () {
if (this.ready()) {
this.render();
} else {
this.render('Loading');
}
}
});
Am I doing something very wrong, or is this just a complicated thing to achieve? One would think that waitOn would make the rest of the function wait until the subscription is ready.
Any help would be highly appreciated.
It appears that the data function is running before the subscription is ready. Even if the data function did run after the subscription was ready, it wouldn't be a reactive data source rendering the pub/sub here pointless. Here's a great article on reactive data sources.
Referring to the example from the Iron Router Docs for subscriptions, you would do something like this:
Router.route('/package/:id', {
subscriptions: function() {
// returning a subscription handle or an array of subscription handles
// adds them to the wait list.
return Meteor.subscribe('SinglePackage', this.params.id);
},
action: function () {
if (this.ready()) {
this.render();
} else {
this.render('Loading');
}
}
});
Then in your template.js:
Template.Package_page.helpers({
singlePackage() {
// This is now a reactive data source and will automatically update whenever SinglePackage changes in Mongo.
return Package.find().fetch();
}
});
In your template.html you can now use singlePackage:
<template name="Package_page">
{#with singlePackage} <!-- Use #each if you're singlePackage is an array -->
ID: {_id}
{/with}
</template>

How to use Meteor.setInterval() with Collection.update() properly

Hello and sorry for my broken English.
I have a method "updateCounterState" for incrementing and updating a number every second in my mongodb-Collection and showing this number in my template in my html-file. And it seems to work, but I get every time I use this function two errors. For three days I am trying to figure out how to fix these errors. I believe I have to use this code block with a Meteor.bindEnvironment-Wrapper because of my asynchronous updates. However, I don't know how to use this to fix these errors. Or maybe I am completely wrong and these errors have another cause.
EDIT #2:
client/main.html
<head>
<title>test-timer</title>
</head>
<body>
{{> timeTrackerTemplate}}
</body>
<template name="timeTrackerTemplate">
{{#each showCounterState}}
<p class="counter-state">{{state}}</p>
<button class="start-counting">Start</button>
{{/each}}
</template>
client/main.js
import { Template } from 'meteor/templating';
Template.timeTrackerTemplate.events({
'click .start-counting': function(e) {
Meteor.call('updateCounterState', this._id);
}
});
server/main.js
import { Meteor } from 'meteor/meteor';
Meteor.startup(() => {
// code to run on server at startup
});
methods.js (root folder)
Meteor.methods({
'updateCounterState': function(id) {
Meteor.setInterval(function() {
TimeTracker.update(
{_id: id},
{
$inc: {state: 1},
},
);
}, 1000);
}
});
ttcollection.js (root folder)
TimeTracker = new Mongo.Collection('testtracker');
if (Meteor.isClient) {
Template.timeTrackerTemplate.helpers({
showCounterState: function () {
return TimeTracker.find();
}
});
}
meteor:PRIMARY> db.testtracker.find({})
{ "_id" : ObjectId("57ee677227a0af6b59dc12ce"), "state" : 147 }
{ "_id" : ObjectId("57ee677a27a0af6b59dc12cf"), "state" : 148 }
{ "_id" : ObjectId("57ee6e6027a0af6b59dc12d0"), "state" : 73 }
Error every time I press a button:
Exception while simulating the effect of invoking 'updateCounterState' Error: Can't set timers inside simulations
at withoutInvocation (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:463:13)
at bindAndCatch (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:471:33)
at Object.setInterval (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:498:24)
at updateCounterState (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:66:20)
at http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3973:25
at withValue (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:1077:17)
at Connection.apply (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3964:54)
at Connection.call (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3840:17)
at Object.clickStartCounting (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:47:20)
at http://localhost:3000/packages/blaze.js?hash=a9372ce320c26570a2e4ec2588d1a6aea57de9c1:3718:20 Error: Can't set timers inside simulations
at withoutInvocation (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:463:13)
at bindAndCatch (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:471:33)
at Object.setInterval (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:498:24)
at updateCounterState (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:66:20)
at http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3973:25
at withValue (http://localhost:3000/packages/meteor.js?hash=ae8b8affa9680bf9720bd8f7fa112f13a62f71c3:1077:17)
at Connection.apply (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3964:54)
at Connection.call (http://localhost:3000/packages/ddp-client.js?hash=27502404fad7fc072e57e8b0b6719f40d92709c7:3840:17)
at Object.clickStartCounting (http://localhost:3000/app/app.js?hash=f641538433c68c8f8b820f0e05cebb12531cb357:47:20)
at http://localhost:3000/packages/blaze.js?hash=a9372ce320c26570a2e4ec2588d1a6aea57de9c1:3718:20
Where is the updateCounterState function defined? Is it a helper on a Template? What are the allow/deny statuses on the TimeTracker collection?
EDIT (after question updated)
First, your method takes as a single parameter the id of the TimeTracker, but when you call your method, you don't pass anything. You should either create a TimeTracker object from the client and then pass its _id, or take no arguments in your function and create it on the server (in this case, your method should return the _id to keep track of it.
Then, putting code in the root folder is not the best practice, you should use the /imports folder and then import { foo } from 'foo.js', or put your code in /server or /client.
Your Template helpers returns a Mongo cursor which is of no use. If you want to return a single TimeTracker, use TimeTracker.findOne({ _id: id }) which will return the object. Basically, you should probably have something like:
Template.timeTrackerTemplate.onCreated(function () {
this.trackerId = null;
});
Template.timeTrackerTemplate.helpers({
showCounterState: function() {
const trackerId = Template.instance().trackerId;
return trackerId ? TimeTracker.findOne({ _id: trackerId }).state : '';
}
});
Template.timeTrackerTemplate.events({
'click .start-counting': function(e, instance) {
instance.trackerId = TimeTracker.insert({ state: 0 });
Meteor.call('updateCounterState', instance.trackerId);
}
});
I solved my errors. It is important to call methods with collections on server side only - especially without "insecure" package.
if (Meteor.isServer) {
//Meteor.methods()
}

How to get the 'keyword' in domain.com/keyword with Iron Router

I am working on a site where I have to search in the DB for string that come after the / on the root domain. I can't find anything about it in the documentation.
I am trying to make it work with Iron Router but any other suggestion would work out.
Thanks for the help!
Edit: Basically I just want to pass anything that comes after domain.com/ to a variable.
Here's something i've been doing so maybe it'll lead you down the right path
Route sends URL params to ownedGroupList template
Router.route('/users/:_id/groups', {
name: 'owned.group.list',
template: 'ownedGroupList',
data: function() {
return {params: this.params};
}
});
Template ownedGroupList can access params object using this.data in onCreated, onRendered, and onDestroyed template event handlers
Template.ownedGroupList.onCreated(function(){
this.subscribe("owned-groups", this.data.params._id );
});
Template ownedGroupList can access params through this variable in helper methods
Template.ownedGroupList.helpers({
groups: function() {
return Groups.find({owner: this.params._id });
}
});
Template ownedGroupList can access params through template.data variable in event handlers
Template.ownedGroupList.events({
'click .a-button': function(event, template) {
var group = Groups.findOne({owner: template.data.params._id });
// do something with group
}
});
Here's a simple route that should do the trick
Router.route('/:keyword', {
name: 'keyword',
template: 'keywordTemplate',
data: function() {
return this.params.keyword;
}
});
This will pass the keyword as the data context to your template and then you can do whatever you want with it. Alternatively you can perform the search straight in the router (especially if you're passing the keyword to a subscription so that the search runs on the server). For example:
Router.route('/:keyword', {
name: 'keyword',
template: 'keywordTemplate',
waitOn: function(){
return Meteor.subscribe('keywordSearch',keyword);
},
data: function() {
return MyCollection.find();
}
});
This second pattern will send your keyword to a subscription named keywordSearch that will execute on the server. When that subscription is ready, the route's data function will run and the data context passed to your keywordTemplate will be whatever documents and fields have been made available in MyCollection.

Meteor: onRendered doesn't get fired again after second render iron-route

I have an iron-router route:
Router.route('/profiel/bewerken', {
subscriptions: function () {
return Meteor.subscribe('currentUser');
},
action: function () {
if (this.ready())
this.render('profielBewerken', {
to: 'container',
data: function () { return Meteor.user(); }
});
else
this.render('profielBewerken', {
to: 'container',
data: { loading: true }
});
}
});
It waits until the subscription is available, and then renders the template again once the data is available. Even though it does render the template again with the data, my Template.profielBewerken.onRendered(function () { ...}) callback does not get fired a second time! Does anyone know why not and if there is a solution to this?
I could copy the template and rename it profielBewerken2 and render that, but then I would have to mirror two chucks of code and manually copy it again every time I modify the template... If there is a better option available then please let me know.
For those interested, I am adding the 'loading' class to a form in the initial template load (see http://semantic-ui.com/collections/form.html for the effect).
Thanks!
onRendered only fires when an instance of the template is added to the DOM, it will thereby not fire again on data changes.
If you want to execute code once the data is ready you should use the template.autorun function like so:
Template.profielBewerken.onRendered(function () {
this.autorun(function (comp) {
if (Meteor.user()) {
// do some stuff
comp.stop();
}
});
});

Meteor this.params._id is undefined based upon ":_id?"

I have a game that I know works properly with an ID per the code on the client side. For example if I were to use the below with {{game._id}} it works properly:
Template.gamePage.game = function() {
return GameCollection.findOne({current: true});
};
However, I am trying to gain access to the publications of 'submissions; only for the specific game ID. Console log below returns undefined.
router.js
this.route('gamePage', {
path: '/games/:_id?',
waitOn: function() {
console.log(this.params._id);
return [
Meteor.subscribe('randomQuestions', Random.id()),
Meteor.subscribe('submissions', this.params._id)
];
}
});
I suspect that params._id pulls from games/:_id, however, I would like it so that that it remains games/:_id? so that I do not have an unnecessary long address.
Any thoughts on why I am getting undefined for params._id
I think you have one button for to access a game, for example...
Tracker.autorun(function () {
Session.set('gameCurrent');
});
Template.gamePage.helpers({
allGames: function(){
return GameCollection.find({});
},
getCurrentGame:function(){
return Session.get('gameCurrent');
}
})
// with this action you access a the route with the id specified
Template.gamePage.events({
'click button#game' : function(event,template){
Session.set('gameCurrent',this._id);
Router.go('editEmail',{_id:this._id})
}
})
Remember that Session only works in the client.

Categories

Resources