Im getting the "waiting on local host" in Chrome and Firefox but doubt there is an issue with browsers with my laptop; the issue is with Iron Router. See my router.js:
Router.configure({
layoutTemplate: 'layout',
loadingTemplate: 'loading',
notFoundTemplate: 'notFound',
waitOn: function() { return Meteor.subscribe('jobs'); }
});
Router.route('/', {name: 'jobsList'});
Router.route('/jobs/:_id/', {
name: 'jobPage',
data: function() { return Jobs.findOne(this.params._id); }
});
// route to edit a job post
Router.route('/jobs/:_id/edit/', {
name: 'jobEdit',
data: function() { return Jobs.findOne(this.params._id); }
});
Router.route('/jobs/create', {name: 'jobCreate'});
var requireLogin = function() {
if (! Meteor.user()) {
if (Meteor.loggingIn()) {
this.render(this.loadingTemplate);
} else {
this.render('accessDenied');
}
} else {
this.next();
}
}
Router.onBeforeAction('dataNotFound', {only: 'jobPage'});
Router.onBeforeAction(requireLogin, {only: 'jobCreate'});
Going to /jobs/sgjdhdbhbbd the page does not load, but if I change Router.route('/jobs/:_id/', { to Router.route('/:_id/', {, the page loads. I am lost. Are there any tweaks to try?
********EDIT********
I am also using Polymer if that helps.
Thank you all for your support. I should have mentioned I was using Polymer in the first my so my apologies.
The issue is with Polymer as discussed here. I have done what ThaumRystra said and all is well.
I have solved the issue by including a trailing forward slash on all polymer imports:
Replace:
rel="import" href="bower_components/paper-toast/paper-toast.html">
rel="import" href="bower_components/paper-fab/paper-fab.html">
With:
rel="import" href="/bower_components/paper-toast/paper-toast.html">
rel="import" href="/bower_components/paper-fab/paper-fab.html">
If you have an image src url, include the forward slash at the front and it will display.
I think the problem comes from here:
Router.route('/jobs/create', {name: 'jobCreate'});
The "create" is used as "id" on your route 'jobCreate'
Just try something like this
Router.route('/jobs/view/:_id/', {
name: 'jobPage',
data: function() { return Jobs.findOne(this.params._id); }
});
// route to edit a job post
Router.route('/jobs/edit/:_id/', {
name: 'jobEdit',
data: function() { return Jobs.findOne(this.params._id); }
});
Router.route('/jobs/create/', {name: 'jobCreate'});
EDIT:
The source of problem is here:
Router.route('/jobs/:_id/', {
All path after /jobs/ is used as :id
Related
I have a meteor app and with the package iron-router, I try to block all pages if the user is not connected except fews pages. And if nothing is specified we go on the landing page.
So in the file router.js, I have :
Router.onBeforeAction(function() {
if (!Meteor.userId()) {
Router.go('login');
} else {
this.next();
}
}, {
except: [
"login", "landing", "register", "forgotPassword"
]
});
Router.route('/', function () {
Router.go('landing');
});
But when I go on localhost:3000/ I'm redirected to login page and not to the landing page.
If I remove the onBeforeAction function, I'm redirect to the landing page.
So it must be a problem with this 2 functions but I don't know where. Maybe I need to precise the "/" in the exceptions but it doesn't work. Do you have an idea ?
You need to define the route '/' in your exceptions too, otherwise this is caught by the onBeforeAction
Try re-defining as follows
Router.onBeforeAction(function() {
if (!Meteor.userId()) {
Router.go('login');
} else {
this.next();
}
}, {
except: [
"default", "login", "landing", "register", "forgotPassword"
]
});
Router.route('/', function () {
Router.go('landing');
}, {
name: "default"
} );
In this case you name the route and then you can add it to your exception list
see http://iron-meteor.github.io/iron-router/#named-routes
I'm new to meteor and coding in general. I need to change this to flow router so that I can get the comments to work(I guess). Does anyone want to lend a hand?
Router.map(function () {
this.route('post/:id', {
waitOn: function() {
return [
Meteor.subscribe('post', this.params.id),
Meteor.subscribe('postComments', this.params.id)
]
},
data: function() {
return {
post: Posts.findOne({_id: this.params.id}),
comments: Comments.find({postId: this.params.id})
}
}
});
});
And btw I'm using flow router on everything in the app so I guess iron conflicts with it which gives me this:
Oops, looks like there's no route on the client or the server for url: "http://localhost:3000/recipe-book."
Iron-router is preventing my template from rendering a new page because it seems to believe it is already there.
The routes that I am dealing with are these:
Router.route('/', {
name: 'landingpage',
template: 'landingpage',
onBeforeAction: function() {
this.next();
}
});
Router.route('/chapter/:pathSlug/:chapterSlug', {
name: 'chaptershow',
template: 'chaptershow',
//waitOn: function() {
//return [Meteor.subscribe('users'),
//Meteor.subscribe('ChapterCollection')];
//},
onBeforeAction: function() {
Session.set('currentRoute', 'chapter');
this.next();
}
});
Let's say I have two chapters I want to display:
/chapter/voyage/somestories
/chapter/voyage/someotherstories
From the console I can easily go from the landingpage to either of the voyage pages or vice versa with
Router.go('landingpage');
Router.go('/chapter/voyage/somestories');
However, if I am on /chapter/voyage/somestories and try to go to /chapter/voyage/someotherstories using either
Router.go('/chapter/voyage/someotherstories');
Router.go('chaptershow', {pathSlug: 'voyage', chapterSlug: 'someotherstories'});
the URL in the location bar changes to /chapter/voyage/someotherstories but the new context doesn't load.
How do I get my new chapter to render?
I've set up two routes in Iron-Router: 'home' (a paged list of all post) and 'doc' (a detail view). The home page loads just fine, but the detail view can only be loaded if the home page has been viewed previously. Otherwise it will render empty – and it can't be used as a permalink.
This will always load:
http://localhost:3000/
This will only load if 'home' has been viewed before:
http://localhost:3000/doc/tZFawq8cgf43hZBaJ
the routes:
Router.map(function() {
this.route('home', {
path: '/'
});
this.route('doc', {
path: '/doc/:_id',
data: function() {
return MyPix.findOne({_id: this.params._id});
}
});
});
the doc template:
<template name="doc">
<h1>{{this.name}}</h1>
<img src="{{ this.url store='OriginalRetinaPix' }}" width="{{ this.metadata.width }}" height="{{ this.metadata.height }}" />
</template>
publish/subscribe:
Meteor.publish('MyPix', function(cursor) {
Counts.publish(this, 'numberOfPosts', MyPix.find(), { noReady: true });
return MyPix.find({}, {sort: {uploadedAt: -1}, limit: 4, skip: cursor});
});
if(Meteor.isClient) {
Session.setDefault('docCursor', 0);
console.log('docCursor: ' + Session.get('docCursor'));
Meteor.autorun(function(){
Meteor.subscribe('MyPix', Session.get('docCursor'));
})
}
btw: the project on GitHub
On your "doc" route, you should use the waitOn in order to have the data ready on page load. Add a loading template in the Router.configure as well
I recommend you to upgrade to the new iron:router routes declarations and also add meteorhacks:subs-manager for better cache on the subscriptions.
This is an example that should work in your case
var subs = new SubsManager();
Router.route('/doc/:_id', {
name: 'doc',
template: 'doc',
waitOn: function() {
return subs.subscribe('aPix', this.params._id);
},
data: function() {
return {
apix: MyPix.findOne({
_id: this.params._id
})
};
}
});
and on the server side create a publications.js
Meteor.publish('aPix', function(id) {
check(id, String);
return MyPix.find(id);
});
Use this.
Router.map(function() {
this.route('home', {
path: '/'
});
this.route('doc', {
path: '/doc/:_id',
waitOn: function(){
return Meteor.subscribe('MyPix');
},
data: function() {
return MyPix.findOne({_id: this.params._id});
}
});
});
Also you subscription should look like this.
Meteor.publish('MyPix', function(cursor) {
//Counts.publish(this, 'numberOfPosts', MyPix.find(), { noReady: true });
return MyPix.find({});
});
Also Add, meteor add sacha:spin, because when you have a lot of people, the subscription will be have a little delay.
Add this to each route.
loadingTemplate: "loading"
<template name="loading">
{{> spinner}}
</template>
Router.onBeforeAction("loading");
Just in case you are showing 100+ images on 'home' and someone enter and have a slow connection, he will think that the page load empty, or something.
You only subscribe to a subset of all the documents. If you directly go to /doc/tZFawq8cgf43hZBaJ, the document with the id tZFawq8cgf43hZBaJ may not be part of the subset of documents you receive on the client.
Note: if this answer is correct, you should be able to directly go to /doc/<id> for those documents showing up first on the home page (on the first page, when the session variable docCursor is 0).
I upgraded to Meteor 1.0, installed the latest iron-router package, tried to run my app and got this nice warning in my console log:
Route dispatch never rendered. Did you forget to call this.next() in
an onBeforeAction?
So I tried to modify my routes according to the new version.
this.route('gamePage', {
path: '/game/:slug/',
onBeforeAction: [function() {
this.subscribe('singlePlayer', this.params.slug).wait();
var singlePlayer = this.data();
if (singlePlayer) {
if (singlePlayer.upgrade) {
this.subscribe('upgrades', this.params.slug).wait();
this.next();
}
this.next();
}
this.next();
}],
data: function() {
return Games.findOne({slug: this.params.slug});
},
waitOn: function() { return [Meteor.subscribe('singleGame', this.params.slug)]}
});
How can I fix this?
Any help would be greatly appreciated.
Try removing all the .wait()s and removing the array around your onBefore function.
With the new API this.next() replaces .wait().