We Keep Coding

Meteor iron:router transitions

I am trying to implement transitions between pages by using iron:router. I defined the animations in the css and now everything I need is to call them with the iron:router. For some reason the following code:
animateContentOut = function() {
$('#content').removeClass("animated fadeIn");
return $('footer').addClass("hide");
}
fadeContentIn = function() {
$('#content').addClass("animated fadeIn");
return $('footer').removeClass("hide");
}
Router.onBeforeAction(animateContentOut);
Router.onAfterAction(fadeContentIn);
returns an exception:
Route dispatch never rendered. Did you forget to call this.next() in
an onBeforeAction?

As specified in the Iron-Router documentation, now both onBeforeAction and onAfterAction callbacks require this.next(). https://github.com/iron-meteor/iron-router
So simply simply add that line to the end of your fadeContentIn and animateContentOut code.

If you have login try like this
Router.onBeforeAction(function () {
if (!Meteor.user()) {
this.render('Login');
} else {
this.next();
}
});

Passing parameters to a different jscript on meteor

I've just started using Meteor with Ionic - and am having difficulty working out how to pass information when attempting to change pages.
<a class='button button-assertive' id="viewContact" data-ion-modal="viewContact" data-id="{{firstName}}">View Contact</a>
This is the button that ive created - and my javascript is:
Template.addContact.helpers({
listCont: function () {
return listCont.findOne({firstName: template.data.id})
}
});
What is the proper way to give the firsName: the actual data? Id love to use the ID that is created behind the scenes too.
Ive attempted with this as an alternative unsuccessfully too:
"click #viewContact": function () {
alert("test");
currentContact = Session.get({ _id: this._id });
Router.go('/viewContact');
return listCont.findOne({ _id: this._id });
},
Hope this is understandable, and thank you.

Since you're already using a router, just define a route that takes a parameter and then navigate to it.
Router.go('/viewContact',{_id: this._id});
Route:
Router.route('/viewContact/:_id', function () {
var item = listCont.findOne.findOne({_id: this.params._id});
this.render('viewContact', {data: item});
});

Force template refresh ember.js

I'm using I18n localization package to take care of the switching language part of my app. It uses a global variable to set the language wanted and a json file to store the translations.
As the switching of a language is just a change in a global variable ember doesn't detect it and doesn't render the templates automatically. I forced it via an action in the application controller :
Extranet.ApplicationController = Ember.ObjectController.extend(
{
actions:
{
localToFr: function()
{
this.localisation('fr'); // this changes the global variable
this.get('target.router').refresh(); // this is what refresh the template
},
localToEn: function()
{
this.localisation('en');
this.get('target.router').refresh();
}
},
localisation: function(lg)
{
I18n.locale = lg;
}
})
I have two problems with that solution :
1) The application template isn't rerendered via my
this.get('target.router').refresh();
2) And my other problem, it doesn't work on templates which don't request a server access ( e.g. : the nest of routes 'authSession' )
Extranet.Router.map(function()
{
this.resource(
'parkings', {path:'/'}, function ()
{
this.route('parking', {path:'/parking/:parking_id'});
this.route('historique', {path:'/parking/:parking_id/historique'});
this.route('sessAct', {path:'/parking/:parking_id/sessAct'});
this.route('rapport', {path:'/parking/:parking_id/rapport'});
}
);
this.resource(
'authSession', function ()
{
this.route('login');
this.route('logout');
}
);
}
);

I was having a similar issue. I just went with View.rerender() on the main view, which was a form in my case.

Load an Ember.JS template once it has been requested by the user (i.e. a link serving that template has been clicked)?

I've got this:
{{#link-to "register"}}Register{{/link-to}}
The problem is, I don't want to load register.hbs - the file in which I keep the register handlebar straightaway, but want to load it right after the user clicks on the link, and delay the template from loading until the handlebar has loaded.
Is this possible?
Thanks.

Yes you mostly can, but it'll probably provide a slower user experience than just loading them up front, or precompiling and loading them up front.
So in your particular use case you'd stop the transition from occurring, fetch and compile the template, then retry the transition.
The general idea looking like this
App.ColorRoute = Ember.Route.extend({
beforeModel: function(transition){
if(!Em.TEMPLATES.color){
transition.abort();
$.ajax({
url: '/templates/color.hbs',
success: function(data) {
Em.TEMPLATES.color = Em.Handlebars.compile(data);
transition.retry();
}
});
}
},
model: function(params) {
return this.store.find('color', params.id);
}
});
Example: http://emberjs.jsbin.com/OxIDiVU/866/edit
And you could make it a bit more reusable by creating a mixin and applying it to routes that you want to implement this pattern on.
App.TemplateMixin = Em.Mixin.create({
templateRequired: null,
beforeModel: function(transition){
var template = this.get('templateRequired');
if(template && ! Em.TEMPLATES[template]){
transition.abort();
$.ajax({
url: '/templates/'+ template + '.hbs',
success: function(data) {
Em.TEMPLATES[template] = Em.Handlebars.compile(data);
transition.retry();
}
});
}
}
});
App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
templateRequired:'color',
model: function(params) {
return this.store.find('color', params.id);
}
});
http://emberjs.jsbin.com/OxIDiVU/867/edit
One last statement
Now that I think about it, you don't need to abort and retry the transition, the before model takes a promise and you can just return a promise which would allow any loading route to stay active.
App.TemplateMixin = Em.Mixin.create({
templateRequired: null,
beforeModel: function(transition){
var template = this.get('templateRequired');
if(template && ! Em.TEMPLATES[template]){
return $.ajax({
url: '/templates/'+ template + '.hbs'
}).then(function(data){
Em.TEMPLATES[template] = Em.Handlebars.compile(data);
});
}
}
});
App.ColorRoute = Ember.Route.extend(App.TemplateMixin,{
templateRequired:'color',
model: function(params) {
return this.store.find('color', params.id);
}
});
Example: http://emberjs.jsbin.com/OxIDiVU/868/edit
I lied, last note
Following any of the last two patterns you need to be aware of the fact that the mixin is overriding the default implementation of beforeModel. So if you want to apply it on the route as well you'd need to call this._super(transition) from the route to call the mixin implementation.
Example: http://emberjs.jsbin.com/OxIDiVU/869/edit

Knockout.js and Sammy.js wrong behaviour

I'm developing admin panel to my website and decided to do it with knockout and sammy. But I am faced with a routing problem. I have two pages:
http://localhost/admin/element and http://localhost/admin/category.
On my element page I have the following Sammy config:
Sammy(function() {
this.get('#:currentpage', function() {
self.reloadPage(this.params.currentpage);
});
this.get('', function() {
this.app.runRoute('get', '#1');
});
}).run();
Everything works perfect but if I try to go to another page (by usual link, e.g. Edit Categories) I just get to the empty route on the same page, so I just cannot go to another page with link. Any ideas how to fix that?

Don't use '' in your Sammy configuration. Try '/' for root page or '/admin/element' for your elements instead.
var Router = function() {
var sammy = new Sammy.Application(function() {
this.get('#:currentpage', function(context) {
alert(context.params.currentpage);
});
this.get('/admin/element', function () {
this.app.runRoute('get', '#1');
});
}),
run = function() {
sammy.run();
};
return {
run: run
};
};
$(function() {
var r = new Router();
r.run();
});
PS: The example uses version of Sammy 0.7.1. In version 0.6.3 there is another behavior.

This works if you have an action link and want to click through to another page
`<li>#Html.ActionLink("Admin Action Link Test", "Admin", "Home")</li>
this.get('/Home/Admin', function ()
{
location.assign("/Home/Admin");
});`
or you can do this using the hash
<li>About Full Path</li>
this.get('#/Home/About', function ()
{
location.assign("/Home/About");
});