I am trying to use the history.go() for the back and logout functions in my app as below
test.html
<a id="back" href="#"><img src="img/back.png" width="35px" />BACK</a>
test.js
'click #back': function() {
history.go("/dashboard");
}
This worked for part of my code, but now it does not work.Is there anything missing in my code?
Are you sure there's a /dashboard in your history when you hit this? This seems like an odd way to make this feature. Are you using a router? Iron Router or Flow Router? If so, use their functions to navigate instead. If not, perhaps you should. Most meteor apps do.
Related
Needless to say, my experience with Meteor is lacking. I come from a Rails background, where you can do a lot more logic (and magic) in your views than Meteor.
The situation: I've got some routes that look like /things/:_id, and I've named that route 'thing' because it shows only one thing of a user's many owned things:
FlowRouter.route('/things/:_id', {
name: 'thing',
action() {
BlazeLayout.render('appPage', {app: 'thing', sidebar: "thingsListOnThing", header: 'thingTitle'});
}
});
As you can see, I'm also loading a template I've built to list all of the user's owned things on the sidebar for easy navigation. That template, thingsListOnThing is the target of this question.
Get the gist? I'm able to mark the route that dislays a template with a complete list of a user's things as active using zimme:active-route like so:
// A list of all a user's things
<div class="{{isActiveRoute name='things' class='is-active'}}">
List of Things
</div>
This package is great, but it won't help me with routes that look like /things/:_id because, then every link to each individual thing would be is-active on any thing page, not just the one where the current path's :_id matches the _id of the active thing.
I'm really kind of stuck here. My first guess would be to use template helpers, but I'm confused as to where to get started with that.
If need be, please as me to upload any piece of my code you require. I figured it's such a generic question that you guys probably don't need to see all of my code to understand what I'm trying to accomplish.
Using: zimme:active-route
Template Helpers
Template.listOfThings.helpers({
activeListClass(page) {
const active = ActiveRoute.name('thing') && FlowRouter.getParam('_id') === this._id;
return active && 'active';
},
});
Template HTML:
<a class="{{isActivePath 'thing'}}" href="/things/{{_id}}">
<div class="thingListItem {{activeListClass page}}">
{{title}}
</div>
</a>
I have a Meteor application and I'm using a combination of angular-meteor and Iron Router routing.
Angular-meteor client side routing is used for all browser side routing and Iron Router is used for all server side routing. I'm implementing an OAuth2 server in Meteor so I need to be able to hit a URL without using the client side code.
The setup works great, but with one consequence: the Iron Router 'not found' template always shows on the client, because I have no client side routes for Iron Router:
I've also tried adding a blank Iron Router route to the client side code:
Router.route('(.*)', function(){
//Do nothing
});
or
Router.route('(.*)', function(){
//Do nothing
this.ready();
});
But that results in all my angular-meteor templates being duplicated on the client:
I've also tried setting the Iron Router configuration to use a different not-found template I've written in Blaze, and using angular-with-blaze:
> meteor add angular-with-blaze
client & server code:
Router.configure({
notFoundTemplate: "ironrouternotfound"
});
ironrouternotfound_blaze.html:
<template name="ironrouternotfound">
IR Not Found
</template>
ironrouternotfound.html
<blaze-template name="ironrouternotfound"></blaze-template>
But that results in the following text being injected into the bottom on the HTML DOM:
Couldn't find a template named "ironrouternotfound" or "ironrouternotfound". Are you sure you defined it?
This message is injected by IronRouter and it doesn't have an ID on the div or any CSS classes so I can't hide it using JS or CSS. (Well, I might be able to hack a JS to remove the last div on the page, but that could be dangerous)
Any one managed to remove the Iron Router not-found view in this situation?
My temporary CSS hack is:
div[style="margin: 0 auto; color: red;"] {
display: none;
}
This works for me. First declare a blank HTML template in a client folder like this:
<template name="noRoutesTemplate"></template>
Next in a common folder (eg. 'lib') add iron router's noRoutesTemplate to the configuration.
import { Router } from 'meteor/iron:router';
Router.configure({
noRoutesTemplate: 'noRoutesTemplate',
});
See this reference link
I have tried using command like scrollTo(0) and packages like okgrow:router-autoscroll. I have read through many pages online. I am completely unable to make it so that when I load a new template via route (Iron Router) it automatically scrolls to the top.
Edit: I have tried all of the following to no avail:
$(window).scrollTop()
$('body, html').scrollTop()
$('body').scrollTop()
$(document).scrollTop()
window.scrollTo(x, y)
For those of you with the same issue. I ended up solving this with problem in all browsers with the following code:
Template.templateName.onRendered(function(){
$('.wrapper-header')[0].scrollIntoView();
});
This should work in all browsers as it did for me, and remove the necessity for flowrouter and Iron Router autoscroll addons.
Hope this helps!
when I start meteor like this:
meteor --production
I get a blank page where my app should be and the following error shows up in my browser console:
No such function: navClassName
However if I start meteor normally like this:
meteor
My app runs without problem.
What could be the problem? Do meteor template helpers need to be loaded differently during production?
Relevant files:
client/navigation/navigation.html:
<template name="navigation">
<ul class="nav navbar-nav">
<li class="{{navClassName 'home'}}">
home
</li>
<li class="{{navClassName 'blog'}}">
Blog
</li>
</ul>
</template>
client/navigation/navigation.js:
Template.navigation.helpers({
'navClassName': function (route) {
if (Router.current()) {
return Router.current().route.options.navbarSelected.search(route) != -1 ? "active" : "";
}
}
});
Move navigation.js to the client/lib directory, or at least the Template.navigation.helpers part and fix/remove any other JavaScript that is causing errors.
I wish I could elaborate more, but this issue seems to be related to the file load order. Files in the lib directory are loaded first and moving the helpers there solved the problem for me.
A typical file structure can be found in the documentation. See the comments in the Example File Structure to learn about some of the special behaviors.
While this may work for you, finer control over dependencies can most easily be achieved through packages, as explained in this other answer from SO. This is specially necessary for code that should be available to both client and server.
Currently, the only solutions I have found for animating between routes is just fade out the current page onBeforeAction and fade in the new page onAfterAction. But this is just lame.
I want to try to execute some really sleek transitions like these.
I believe this requires having multiple pages rendered on the page at the same time, but that seems very resources intensive and doesn't even seem to use iron router at all.
Any ideas how I can implement this?
I use a solution like this http://meteorpad.com/pad/5kii9SRbbnjiTHeQe
The MeteorPad doesn't allow to use IronRouter, so my example doesn't use it. In IronRouter you can use action() method to set "currentPage" session variable and always render "transitioner" template. Something like this:
Router.map(function() {
this.route('home', {
path: '/',
action: function() {
Session.set('currentPage', 'home');
this.render('transitioner');
}
});
this.route('about', {
action: function() {
Session.set('currentPage', 'about');
this.render('transitioner');
}
});
});
I use a wrapper for this. It also helps me to define transition styles and directions.
And be careful with subscriptions/unsubscriptions, becouse previous page will react to subscriptions changes before the transition is compelete!
This question seems to get asked a fair amount and there is no definitive solution, and a lot of answers out there are getting stale, or at least not applicable to the latest iron-router and Meteor 1.0.
I just did a bunch of searching around for the best answer and at least today it seems the packages for this are:
https://github.com/percolatestudio/momentum-iron-router/
and
https://github.com/ccorcos/meteor-transitioner/
The former hasn't been updated in a little while but has lots of commits. The latter has few commits but may be being actively worked on.
I'm in progress on trying them out so if I remember I'll check back in.