The problem I'm facing is that my userId function is running before Meteor.user() is ready, therefore there is no Meteor.user()._id present and thus I get Exception in defer callback: TypeError: Cannot read property '_id' of undefined when I run the code. If I use the command Meteor.userId(), it fixes it for that part, but it doesn't solve the big issue being that Meteor.user() isn't ready.
Here's my code:
userId : function(){
console.log('userId called and here is the Meteor.user(): ', Meteor.user());
return (this.params._id || Meteor.user()._id);
},
waitOn: function () {
console.log('waitOn called');
return Meteor.subscribe('userProfile', this.userId())
},
addedData : function(){
........
},
data: function(){
...........
},
onBeforeAction : function(){
............
},
onStop : function(){
_.each(this.subscriptions, function(sub){
sub.stop();
});
}
How do I fix this?
Related
Session.set('coursesReady', false); on startup.
UPDATE:
I made it into a simpler problem. Consider the following code.
Inside router.js
Router.route('/', function () {
Meteor.subscribe("courses", function() {
console.log("data ready")
Session.set("coursesReady", true);
});
}
and inside main template Main.js
Template.Main.rendered = function() {
if (Session.get('coursesReady')) {
console.log("inject success");
Meteor.typeahead.inject();
}
The message "inject success" is not printed after "data ready" is printed. How come reactivity does not work here?
Reactivity "didn't work" because rendered only executes once (it isn't reactive). You'd need to wrap your session checks inside of a template autorun in order for them to get reevaluated:
Template.Main.rendered = function() {
this.autorun(function() {
if (Session.get('coursesReady')) {
console.log("inject success");
Meteor.typeahead.inject();
}
});
};
Probably a better solution is to wait on the subscription if you want to ensure your data is loaded prior to rendering the template.
Router.route('/', {
// this template will be rendered until the subscriptions are ready
loadingTemplate: 'loading',
waitOn: function () {
// return one handle, a function, or an array
return Meteor.subscribe('courses');
},
action: function () {
this.render('Main');
}
});
And now your rendered can just do this:
Template.Main.rendered = function() {
Meteor.typeahead.inject();
};
Don't forget to add a loading template.
To Solve Your Problem
Template.registerHelper("course_data", function() {
console.log("course_data helper is called");
if (Session.get('coursesReady')) {
var courses = Courses.find().fetch();
var result = [ { **Changed**
name: 'course-info1',
valueKey: 'titleLong',
local: function() {
return Courses.find().fetch();
},
template: 'Course'
}];
Session.set('courseResult', result); **New line**
return Session.get('courseResult'); **New line**
,
Explanation
The answer is at the return of the helper function needs to have be associated with reactivity in order for Blaze, template renderer, to know when to rerender.
Non-reactive (Doesn't change in the DOM as values changes)
Template.Main.helpers({
course_data: UI._globalHelpers.course_data ** Not reactive
});
Essentially: UI._globalHelpers.course_data returns an array of objects which is not reactive:
return [
{
name: 'course-info1',
valueKey: 'titleLong',
local: function() {
return Courses.find().fetch();
},
template: 'Course'
},
Reactive
From Meteor Documentation:
http://docs.meteor.com/#/full/template_helpers
Template.myTemplate.helpers({
foo: function () {
return Session.get("foo"); ** Reactive
}
});
Returning Session.get function to Blaze is reactive; thus, the template will change as the values changes.
I have a route I call many times. I have to subscribe two collections for having all datas, here's a snapshot:
var one = new Blaze.ReactiveVar(false);
var two = new Blaze.ReactiveVar(false);
this.route('stopIndex', {
path: '/stop/:section/:stop_id',
waitOn: function() {
Meteor.call('getTripIdsForStop', {
stop_id: this.params.stop_id,
from: fromNow(),
to: toMax(),
db: prefix
}, function(err, ids) {
DEBUG && console.log('TRIP_IDS:', ids);
Meteor.subscribe(prefix + '_trips', {
trip_id: {$in: ids}
}, function() {
one.set(true);
});
Meteor.subscribe(prefix + '_stop_times', {
trip_id: {$in: ids}
}, function() {
two.set(true);
});
});
return [
function () { return one.get(); },
function () { return two.get(); }
];
},
The first time I call the route, all goes fine. The second time, the one and two vars are already setted to true so the waitOn doesn't wait and I get a no data message on my template for some seconds, until collections responds. I've tried putting on the first lines of waitOk method:
one.set(false);
two.set(false);
but this makes the waitOn to wait forever. Am I doing something wrong or missing something? Thanks for the help.
I've solved this way:
Router.onStop(function() {
one.set(false);
two.set(false);
});
that invalidates ReactiveVars and will wait. I've also moved all code from waitOn to data. Now the waitOn is like this:
return [
function () { return one.get(); },
function () { return two.get(); }
];
I have added an additional field on Meteor.Users collection called usertype. In Iron-router I am returning the user object if user is logged in. Now in my template I need to check if this usertype field is present else, I direct the user to user registrations screen.
What is happening here is that even though I have the usertype field in my publish function, the user object is not returned with this field initially. It only shows up after 2-3 object loads. And this confuses the template loading logic, as this field is not found on initial load, but when infact the field is present.
DashboardController = RouteController.extend({
template: 'dashboard',
subscriptions: function() {
this.userProfileSub = Meteor.subscribe('singleUser', this.myId());
},
myId: function() {
var userId = Meteor.userId();
if(!userId)
{ userId = ''; }
return userId;
},
user: function() {
return Meteor.users.findOne(this.myId());
},
data: function() {
var user = this.user();
console.log(user);
if(user)
{
return {
user: this.user(),
ready: this.userProfileSub,
};
}
}
});
Here is the publish method:
Meteor.publish('singleUser', function(id) {
check(id, String);
return Meteor.users.find({_id:id}, {fields: { emails: 1,
profile: 1,
usertype: 1,
"services.facebook.id": 1,
"services.facebook.email": 1,
"services.twitter.screenName": 1,
"services.twitter.profile_image_url": 1,
"services.google.email": 1,
"services.google.picture": 1}});
});
EDIT
As answer given below, if the subscription is moved inside the waitOn block it should wait for the subscription to load completely.
waitOn: function() {
this.userProfileSub = Meteor.subscribe('singleUser', this.myId());
return [this.userProfileSub];
},
But now when I try to wait for multiple subscriptions to load in the wait array, it apparently is not waiting for all of them. I still get empty array. Even though I check in the action block. I can find the data later from my console.
waitOn: function() {
return [
Meteor.subscribe('singleUser', this.myId()),
Meteor.subscribe('singleAgentByUserId', this.myId()),
Meteor.subscribe('singleClientByUserId', this.myId())];
},
action: function () {
// this.ready() is true if all items returned from waitOn are ready
if (this.ready())
{
this.render();
}
else
this.render('Loading');
},
Update EDITED (See revision history for much different version due to original question)
Try:
waitOn: function() {
return [
Meteor.subscribe('singleUser', Meteor.userId()),
Meteor.subscribe('singleAgentByUserId', Meteor.userId()),
Meteor.subscribe('singleClientByUserId', Meteor.userId()];
},
loadingTemplate: "loading",
action: function () {
this.render('dashboard');
}
I am using Meteor 1.0
I have the following code :
/lib/collections.js
Members = new Mongo.Collection('members');
/lib/router.js
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound',
waitOn: function() { return Meteor.subscribe('members'); }
});
Router.route('/', {name: 'menu'});
Router.route('/member/new/', {name: 'memberNew'});
Router.route('/member/renew/', {name: 'memberRenewal'});
/server/publications.js
Meteor.publish('members', function() {
console.log("Publishing....");
return Members.find();
});
/client/templates/memberList.js
Template.membersList.helpers({
listMembers: function() {
return members.find().fetch(); >>>>>> Error line
}
});
I get the following error:
Exception in template helper: ReferenceError: members is not defined
at Object.Template.membersList.helpers.listMembers
(http://meteorvb.dhcp.meraka.csir.co.za:3000/client/templates/membersList.js?
I have removed autopublish bit if I change /client/templates/memberList.js to read
Template.membersList.helpers({
listMembers: function() {
return Members.find().fetch();
}
});
Everything works.
Can anyone please help me?
I think it's just a typo where you have used lowercase m instead of upper case M for Members.
Template.membersList.helpers({
listMembers: function() {
return Members.find().fetch(); >>>>>> Error line
}
});
Variables are case sensitive and since the members collection was assigned to "Members" you need to refer it as "Members" elsewhere.
Members = new Mongo.Collection('members');
I encounter an error using Meteor. I call an Method.method.
Template.WelcomeTemplate.events({
'click #btn-findgame': function(e) {
e.preventDefault();
console.log('clicked find game button');
Meteor.call('allocateGame', function(error, id) {
if (error) {
alert(error.reason);
} if (id) {
Router.go('gameRoom', {_id: id})
}
})
}
})
With my Method, I check if there is an room available, create one when the isn't otherwise join. And return the ID of this room.
Meteor.methods({
allocateGame: function () {
console.log('allocateGame method called')
var user = Meteor.user();
// find game where one player is in the room
var gameWaiting = Games.findOne({players: {$size: 1}})
if (!gameWaiting) {
console.log('no game available, create a new one');
var newGameId = Games.insert({players: [user._id], active: false, finished: false});
GameDetails.insert({gameId: newGameId, gameData: []});
return newGameId
} else {
if (_.contains(gameWaiting.players, user._id)) {
console.log('Cannot play against yourself sir')
} else {
console.log('Joining game');
Games.update({_id: gameWaiting._id}, {
$set: {active: true},
$push: {players: user._id}
});
return gameWaiting._id;
}
};
}
})
And my Router:
Router.map(function () {
this.route('welcome', {
path: '/',
controller: WelcomeController})
this.route('gameRoom', {
path: '/game/_:id'
})
});
The Error I recieve is:
Exception in delivering result of invoking 'allocateGame': TypeError: Cannot read property 'charAt' of null
at Object.IronLocation.set (http://localhost:3000/packages/iron-router.js?e9fac8016598ea034d4f30de5f0d356a9a24b6c5:1293:12)
And indeed, If I don't return an ID the Routing will continue as normal. However when I return an ID in my WelcomeTemplate an error will occur.
EDIT:
Even thought my MongoDB is updating my MiniMongo DB is empty. There must be a problem with syncing. Any idea where to look?
In the route, you set the path to be '/game/_:id', that is, a parameter with the name id. In your call to Router.go, you pass a parameter with the name _id.
Don't know if this solves your problem, but it's an error.
This kind of embarrassing taking in account how many hours I've spent on fixing this. The error was created because of an error in my routers.js
this.route('gameRoom', {
path: '/game/_:id'
})
Should be:
this.route('gameRoom', {
path: '/game/:_id'
})
Happy coding.