We Keep Coding

marionette router does not work. Cannot navigate to a route from address bar

I have a backbone marionette application with requirejs for loading module. Everything else is working just fine as expected. Until I put router in it. The router and controller binding does not seem to work. When I go to a route from address bar: in this case homedomain#edit/id, the router is rerouted to home page. I am taking reference of Marionette a Gentle Introduction By David Sulc for most of my code.
'use strict';
define([
'app',
'email_templates',
'email_list_controller'
], function(App) {
App.module('Email', function(Email, App, Backbone, Marionette) {
Email.Router = Marionette.AppRouter.extend({
appRoutes: {
'edit/:id' : 'editEmails',
'': 'listEmails'
}
});
var API = {
listEmails: function() {
require(['email_list_controller'], function(controller) {
App.navigate('/');
controller.list();
});
},
editEmails: function(item){
alert(item); //initial debugging point. this line is referenced in description below.
require(['email_edit_controller'], function(controller){
var id = typeof item === "string" ? item : item.id;
App.navigate('edit/'+id);
controller.editor(item);
});
}
};
Email.on('start', function() {
new Email.Router({
controller: API,
});
});
});
return App.Email;
});
From my understanding so far when I navigate to a route: #edit/<someRandomId> the <someRandomId> should be alerted on the screen. The exact line has been referenced. This is just my approach to see if the router is working. But in fact the whole Email.Router is not working.

Naming of Routes for nested resources in Ember.JS

The following route setup is from the Ember.JS docs (http://emberjs.com/guides/routing/defining-your-routes/) and I have to deal with an equivalent problem:
App.Router.map(function() {
this.resource('post', { path: '/post/:post_id' }, function() {
this.route('edit');
this.resource('comments', function() {
this.route('new');
});
});
});
According to the docs and my own experience this results, among others, in the following route:
/post/:post_id/comments -> App.CommentsIndexRoute
However, since I want a post-specific comment route I would have expected
/post/:post_id/comments -> App.PostsCommentsRoute
What exactly is my fallacy and what would I have to change to achieve my goal.

Only route's share their name with their parent resource. If you wanted it to show up as as PostsCommentsRoute it would be more like this (note I pluralized it to match your example, despite the url not being pluralized)
App.Router.map(function() {
this.resource('posts', { path: '/post/:post_id' }, function() {
this.route('comments');
});
});

Ember.js Error in specifying URL type of location='history' in App.Route

I have started learning the ember.js framework and I am stuck at how to use the setting of the URL type feature that the framework has.
http://emberjs.com/guides/routing/specifying-the-location-api/
I have this simple application.js
App = Ember.Application.create();
App.Router.reopen({
location: 'history'
});
App.Router.map(function () {
this.route('about');
});
App.ApplicationRoute = Ember.Route.extend({
model: function () {
return appdata;
}
});
App.IndexRoute = Ember.Route.extend({
setupController: function (controller) {
// Set the IndexController's `title`
controller.set('indextitle', "My Index title");
},
renderTemplate: function () {
this.render({ outlet: 'indexoutlet' });
}
});
App.AboutRoute = Ember.Route.extend({
model: function () {
return appdata;
},
renderTemplate: function () {
this.render({ outlet: 'aboutoutlet' });
}
});
var appdata = { mytext: '', theplaceholder: 'Enter new text', attr:'Yeap!' }
If I don't use the
App.Router.reopen({
location: 'history'
});
the application works fine and it goes to the 'about' route by appending the URL the '~/EmberjsTest.aspx#/about' as it supposed to do.
However because I do not like the hash symbol in the URL of the page, I would prefer if it was removed and to do that the guide says we should put this code:
App.Router.reopen({
location: 'history'
});
But when I do it I get an error in the Chrome console saying:
'Assertion failed: The URL '/EmberjsTest.aspx' did match any routes in your application'
What am I doing wrong?
Thanks in advance

If you want to use the history API then you have two options.
Serve your Ember app from '/' so that Ember can just work with it's "normal" index/root route.
Create a route in your Ember app that can handle '/EmberjsTest.aspx'.
this.route("index", { path: "/EmberjsTest.aspx" });
Note that if you go with option 2 you'll probably have to update all of your routes to include '/EmberjsTest.aspx' in their paths.
this.resource("posts", {path: "/EmberjsTest.aspx/posts" })

Meteor: IronRouter does not trigger notFound rule

I would like my Meteor app to use IronRouter for client-side routing.
My routing code looks as follows:
Router.map(function() {
this.route('story', {
path: '/story/:_id',
data: function() {
return Stories.findOne({displayId: +this.params._id});
},
notFound: 'storyNotFound'
});
});
I have 2 templates corresponding to this route:
<template name="story">
Welcome to story: {{this.displayId}}.
</template>
<template name="storyNotFound">
Story not found
</template>
Problem: the 'storyNotFound' template is never rendered, not even when
Stories.findOne({displayId: +this.params._id})
returns undefined.
Instead, the 'story' template is rendered with the text "Welcome to story: ".
What am I missing?

Have you tried replacing notFound: with notFoundTemplate ? The Iron Router example uses notFound but I could only find notFoundTemplate in the source code and that worked for me.
Router.map(function() {
this.route('story', {
path: '/story/:_id',
data: function() {
return Stories.findOne({displayId: +this.params._id});
},
notFoundTemplate: 'storyNotFound'
});
});

Ember explicit route

When I define a route explicitly, Ember fails to render the associated template. Do I have to specify in the route object the renderTemplate property every time I create an explicit route? Just to be more clear, here is my example:
define(['ember'],
function(Ember) {
"use strict";
var DudeRoute = Ember.Route.extend({
model: function() {
},
setupController: function() {
},
renderTemplate: function() {
}
});
return DudeRoute;
});
and if I specify in my app like this:
define([ ... ],
function(
Router,
IndexRoute,
DudeRoute,
ApplicationController,
IndexController
) {
"use strict";
/*Module Pattern*/
var App = {
LOG_TRANSITIONS: true,
Router: Router,
// Load routes
IndexRoute: IndexRoute,
DudeRoute: DudeRoute,
//Load Controllers
ApplicationController: ApplicationController,
IndexController: IndexController
//Load Models
//Load Views
};
return App;
});
The whole thing falls apart, it does not render my template. Though if I remove DudeRoute everything works fine.

OK, I figured it out. So My problem was, that I was using some automation to generate code for Route/Controller/View/templates. And what I did and you can see from the code too is that I stupidly set the renderTemplate method to do nothing. So by removing it it will work.