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.

How to define and trigger Backbone route with get params?

I have the following routes:
var Workspace = Backbone.Router.extend({
routes: {
"": "index"
},
index: function() {
...
}
});
At now I can trigger this route like this Backbone.history.navigate('', true); and all works fine. But now I need to add GET params to that router to be possible trigger and handle route like this:
var Workspace = Backbone.Router.extend({
routes: {
"?:query": "index"
},
index: function(query) {
...
}
});
But unfortunately my index callback don't get executed when I trigger Backbone.history.navigate('?needShowPopup=true', true);
How should I define and trigger route to pass and handle GET parameters for my index route?

I would do that
var Workspace = Backbone.Router.extend({
routes: {
"*": "index"
},
index: function() {
var query = location.search;
// work with query
}
});
Let me know if you get a problem.

Backbone routing pushstate unable to go to the link

I'm new to Backbone.js and I'm experiencing routes.
I set a route, and navigating it through an input with
route.navigate("stream")
I firstly created a router:
app.Router = Backbone.Router.extend({
routes: {
"": "home",
"stream": "stream"
}
,initialize: function(){
}
,home: function(){
console.log("Home");
}
,stream: function(){
console.log("Streaming");
new app.streamView();
}
})
If I use the input to navigate to /stream, and it works.
But, If I navigate to www.mysite.it/stream it shows me 404 Error. Any advice?

Backbone non-default root url

I'm trying to integrate Backbone inside a PHP CMS.
The root url for my Backbone app is:
http://localhost/administrator/index.php?option=com_test&controller=product.list
I have setup my router like this:
var AppRouter = Backbone.Router.extend({
routes: {
'': 'test',
}
});
var initialize = function () {
var router = new AppRouter;
router.on('test', function () {
console.log('match');
});
Backbone.history.start({
pushState: true,
root: '/administrator/index.php?option=com_test&controller=product.list'
});
router.navigate('/', {trigger: true});
};
The navigate function is correctly called but the route never matches.
I tried to add a trailing backslash in the root, but it doesn't not change anything.

The problem is that you should either add test method to Router like that:
var AppRouter = Backbone.Router.extend({
routes: {
'': 'test',
},
test: function(){
console.log('test route');
}
});
or listen to route:test event:
router.on('route:test', function () {
console.log('match');
});
because Backbone.Router triggers routes names when matched with prefix route:

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