We Keep Coding

appRouter is not fired on load

I'm trying to set up a router for my backbone application. However when i go to localhost:8888/extractors or localhost:8888/extractors/new. neither of the console messages are being outputted. How come when it is defined in the router itself?
require(['new-extractor-view', 'extractors-collection', 'backbone'], function (NewExtractorView, ExtractorsCollection) {
'use strict';
var extractorCollection = new ExtractorsCollection();
new NewExtractorView({
collection: extractorCollection
});
//
// Initialize URL router
//
var AppRouter = Backbone.Router.extend({
routes: {
'extractors': 'extractorsRoute',
'extractors/new': 'newExtractorRoute',
'*actions': 'defaultRoute'
}
});
var appRouter = new AppRouter;
appRouter.on('route:extractorsRoute', function () {
console.log('test1')
});
appRouter.on('route:newExtractorRoute', function () {
console.log('test2')
});
Backbone.history.start();
});

If you want to use url's without # you should initialize history like:
Backbone.history.start({ pushState: true })
Read more about the pushState option.

The code looks ok to me, but I think you forgot the brackets when creating the new router:
var appRouter = new AppRouter();
Edit: Oh and I'm quite sure Backbone will only match localhost:8888/#extractors (with a leading hashtag) but not localhost:8888/extractors as described here.

Backbone Router not working (without parameters)

I have
var Router1 = Backbone.Router.extend({
routes: {
'': 'index',
'view': 'view1'
}
});
var router1 = new Router1();
router1.on('route:index', function(){
alert('Index Page');
});
router1.on('route:view1', function(){
alert('View 1');
});
Following Urls do not do anything
http://localhost:8080/App1/index.html /*should give alert('Index Page')*/
http://localhost:9090/App1/index.html#view /*should give alert('View1')*/

Your router will work for the URLs like
http://localhost:8080/
http://localhost:8080/#view
Make sure you call Backbone.history.start() to route the initial URL.

Ember.js Won't Accept Root URL

I am trying to create an Ember.js app on a domain that has a ton of different sublevel sites. I'm trying to set my rootURL to '/org/new/' like the docs say so that the root URL will be mydomain.com/org/new/. I'm using the following router code:
App.Router.reopen({
rootURL: '/org/new/'
});
App.Router.map(function() {
this.resource('carouselItems', { path: '/' }, function() {
// child routes
});
});
App.CarouselItemsRoute = Ember.Route.extend({
model: function() {
return this.store.find('carouselItem');
}
});
However, my app keeps trying to load mydomain.com/carouselItems instead. I have a CarouselItemsController that extends ArrayController and a CarouselItemController that extends ObjectController. Both are used when the user navigates to mydomain.com/org/new/ to generate some items in a Bootstrap carousel.

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" })

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.