appRouter is not fired on load - javascript

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.

Related

How to create React router redirect url

My target is to fire a redirect url event with reactjs. How is that possible? Already tried:
successRedirect(){
this.transitionTo('/');
}
and
successRedirect(){
this.router.transitionTo('/');
}
use push instead transitionTo
this.context.router.push('/contact');
MyClass.contextTypes = {
router: React.PropTypes.func.isRequired
}
// app.js
// a bunch of things here :D
var routes = require('./routes');
var RouterContainer = require('./router');
RouterContainer.set(Router.create({
routes: routes
}));
// someUtils.js
var router = require('../router');
router.get().transitionTo('home');

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.

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

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.

Categories