I've got a template that has an intentional delay in it using http://deelay.me so I can test a slow server.
<template name="aboutPage">
<img src="http://deelay.me/2000/http://i.telegraph.co.uk/multimedia/archive/02830/cat_2830677b.jpg">
</template>
On my router page:
Router.configure
layoutTemplate: 'layout'
loadingTemplate: 'loading'
Router.route '/', name: 'homePage'
Router.route '/about', name: 'aboutPage'
loading template:
<template name="loading">
{{> spinner}}
</template>
For some reason, when I hit the About page, I get a missing image icon as the image loads. Am I missing something?
I made it works with this.
Router.route('/about', {
name: 'about',
data: function() {
if(this.ready()){
this.render()
}else{
this.render('loading')
}
}
});
Take a look, here we ensure that the all data on template is ready, if not we render the 'loading' template.
That works for me
I suggest you checking this package: https://atmospherejs.com/mrt/iron-router-progress
It let's you delay the progress from showing up on fast routes.
Router.configure
progressDelay : 100
Regarding the "missing image icon", I tried to reproduce the situation but I couldn't. However, I noticed that using the deelay.me technic won't work for testing the loading between routes. That's because aboutPage is already loaded when the image request starts. Therefore, the loading spinner already disappeared.
Check this repo por a simple example that actually tracks the image loading: https://github.com/humberaquino/meteor-imageloading-example
I hope this helps :)
Related
I've 4 views (templates):
start
showScannedData
dashboard
loading
I defined routing in client_server/lib/routing.js:
Router.configure({
loadingTemplate: 'loading'
});
Router.route('/', {
name:'start',
template:'start'
});
Router.route('/mobile', {
name:'mobileStart',
template:'showScannedData'
});
Router.route('/desktop', {
name:'desktopStart',
template:'dashboard'
});
In client/app.js I put:
Router.go('/start');
It works. However the template showScannedData is rendered twice, as if I set it as templateLayout too.
As for my application I don't need a default layout but single individuals view to be loaded either on start (template: start) or on a specific action performed by the user (templates: showScannedData / dashboard).
What am I doing wrongly?
Thanks to #piscator and #Keith for giving me a key hint.
I figure out that, while I wasn't rendering the template twice, I put
{{>> showScannedData}}
in project_name.html file (i.e. the file rendered when routing is not used).
So I basically removed the line above from the file and used Iron's router to go to starter template by:
Router.go("/")
in client/app.js, which is defined in client_server/lib/routing.js as
Router.route('/', {
name:'start',
template:'start'
});
corresponding to
<template name="start">
<input id="goToMobileBtn" type="button" value="Go to mobile view"/><br><br>
<input id="goToDesktopBtn" type="button" value="Go to desktop view"/>
</template>
Hint: I found out that since "/" route is the first one defined in routing.js, the Router.go is optional.
When I start the Meteor server and navigate to my default route, I see the AppLoading template inside MainLayout (as expected), but the main template never loads even after the subscription is loaded.
I've got a really simple routes.js file (below)
autopublish is still turned on.
I seeded the db and can confirm in the browser console that the subscription is there, and there are items in my Services collection.
Probably missing something really simple here.
/*===================
CONFIGURE DEFAULTS
====================*/
Router.configure({
layoutTemplate: 'MainLayout',
loadingTemplate: 'AppLoading',
notFoundTemplate: 'NotFound'
});
/*===================
CONFIGURE ROUTES
====================*/
Router.route('/', { // DEFAULT ROUTE
name: 'main',
template: 'Main',
waitOn: function() {
return Meteor.subscribe('services');
},
data: function() {
return Services.find();
}
});
I'm guessing you do not have a publication? The client is waiting for a "ready" notification from the publication and is not receiving it, hence nothing is loaded. Remove autopublish and start writing publications.
The autopublish package literally just copies the server DB to the client. You can't subscribe to anything if you do not actually have any publications.
Most of the time, my search returns so fast that it's not worth flashing the loading template to the user...(in fact, it's distracting, as people are fine with a blank screen if the results are coming a split second later)...Is there any way to prevent the loading template from showing if the waitOn is only waiting for a short amount of time?
Here's my configuration
Router.route('/search', {
waitOn: function () {
return searchSubsManager.subscribe("search", Session.get('searchString'));
},
action: function () {
this.render('searchResults');
}
});
I saw that with this package:
https://github.com/Multiply/iron-router-progress
you can control whether it shows up for fast routes, but I don't need all that functionality, nor do I want the progress bar it provides... I'm just wondering if the basic iron router/ waitOn functionality can provide this ability.
There is not configuration to use on the waitOn function, but Why don't you create another layout template, and use it to show that fast routes?
<template name="noLoading">
{{> yield}}
</template>
Router.map(function () {
this.route('fastRoutes', {
path: '/someRoutes',
template: 'myHomeTemplate',
layoutTemplate: 'noLoading',
});
});
Update
or use the sacha:spin package and change the class name depending on the duration of the query.
if(queryDuration){
Meteor.Spinner.options = {
className: 'none'
}
}else{
Meteor.Spinner.options = {
className: 'spinner'
}
}
I have a main page which lists a few text items ("Ideas"), which are clickable links. Clicking on them should take you to a page where you can edit them. Here's my html:
<head>
<title>Ideas</title>
</head>
<body>
</body>
<template name="Ideas">
<ul>
{{#each ideas}}
{{> idea}}
{{/each}}
</ul>
</template>
<template name="idea">
<li>{{text}}</li>
</template>
<template name="ShowIdea">'
<div class="editable" contentEditable="true">{{text}}</div>
</template>
I've added Iron:Router to my project to allow for moving between the pages. Here's the javascript:
Ideas = new Mongo.Collection("ideas");
if (Meteor.isClient) {
Router.route('/', function() {
this.render('Ideas');
});
Router.route('/idea/:_id', function() {
var idea = Ideas.findOne({_id: this.params._id});
this.render('ShowIdea', {text: idea.text});
});
Template.Ideas.helpers({
ideas: function () {
return Ideas.find({});
}
});
}
I inserted a single idea to my Mongo DB using the Meteor Mongo command line tool. That single item shows up properly on my main page. Here's what the HTML looks like in my debugger for the main page:
<html>
<head>...</head>
<body>
<ul>
<li>
The first idea ever
</li>
</ul>
</body>
</html>
Clicking on that link takes me to a new page with an address of:
http://localhost:3000/idea/ObjectID(%22550b7da0a68cb03381840feb%22)
But nothing shows up on the page. In the debugger console I see this error message + stack trace, but it means nothing to me since it all seems to be pertaining to iron-router and meteor, not code which I actually wrote:
Exception in callback of async function: http://localhost:3000/Idea.js?2fd83048a1b04d74305beae2ff40f2ea7741d40d:10:44
boundNext#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:35
http://localhost:3000/packages/meteor.js?e53378596562e8922a6369c955bab1e047fa866b:978:27
onRerun#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:520:13
boundNext#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:35
http://localhost:3000/packages/meteor.js?e53378596562e8922a6369c955bab1e047fa866b:978:27
onRun#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:505:15
boundNext#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:35
http://localhost:3000/packages/meteor.js?e53378596562e8922a6369c955bab1e047fa866b:978:27
dispatch#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:448:7
_runRoute#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:543:17
dispatch#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:844:27
route#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:710:19
boundNext#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:424:35
http://localhost:3000/packages/meteor.js?e53378596562e8922a6369c955bab1e047fa866b:978:27
boundNext#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:371:18
http://localhost:3000/packages/meteor.js?e53378596562e8922a6369c955bab1e047fa866b:978:27
dispatch#http://localhost:3000/packages/iron_middleware-stack.js?0e0f6983a838a6516556b08e62894f89720e2c44:448:7
http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:390:21
_compute#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:308:36
Computation#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:224:18
autorun#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:499:34
http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:388:17
nonreactive#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:525:13
dispatch#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:387:19
dispatch#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:1688:22
onLocationChange#http://localhost:3000/packages/iron_router.js?a427868585af16bb88b7c9996b2449aebb8dbf51:1772:33
_compute#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:308:36
_recompute#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:322:22
flush#http://localhost:3000/packages/tracker.js?21f0f4306879f57e10ad3a97efe9ea521c5b5775:452:24
And then it ends with this warning message:
Route dispatch never rendered. Did you forget to call this.next() in an onBeforeAction?
I don't have an onBeforeAction (I'm not even sure what that is)... so I don't think that message pertains to me?
I just started using Meteor the other day and just added iron-router not 24 hours ago, so I'm a bit lost here. Any pointers on how I can debug and fix this would be great.
Two things need fixing:
When you insert documents from the shell they are assigned _id values which are mongo ObjectIDs, whereas meteor defaults to using strings. This explains the weird URL. To avoid this problem, it's generally best to initialize your data from the server. Here's an example:
if (Meteor.isServer) {
Meteor.startup(function() {
if (Ideas.find().count() === 0) {
Ideas.insert({text: 'feed the cat'});
}
});
}
Now after a $ meteor reset you will always start with one cat-related idea.
If you wish to pass a context to your template, you'll need to use the data attribute like so:
Router.route('/idea/:_id', function() {
this.render('ShowIdea', {
data: function () {return Ideas.findOne({_id: this.params._id})}
});
});
See this example from the docs. After making those changes, the code worked correctly for me.
When I hit a route that doesn't exist on my Meteor app that uses IR, I get a 200 response with an HTML that (when rendered on a browser) displays a js error on console saying that No route found for path: "/aRoute".
How can a make it return 404?
There don't seem to be a correct (or even working?) way of handling real 404's right now. See this issue for example: https://github.com/EventedMind/iron-router/issues/1055
Even when you try ways which should work, you'll still end up with a 200 status code. Like this code below which should work:
this.route( 'pageNotFound', {
path: '/(.*)',
where: 'server',
action: function() {
this.response.writeHead(404);
this.response.end( html );
}
});
I find this much easier way to show page not found. In router.js
Router.configure({
layoutTemplate: "layout",
loadingTemplate: "loading",
notFoundTemplate: "notFound"
})
Here "notFound" could be any template where you want to show 404 error
this.route('template404', {
path: '/*'
}
Use it at the end of your Router.map, cause this catches every value - if you use at the begining every path will be caught to this
Of course you can make it more complex, for example:
this.route('template404', {
path: '/posts/*'
}