Just wondering if there is a simple way to trigger a custom function each time a Backbone.js router is utilized, without having to add it in each of the router functions. Now my script looks like this:
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'index',
'test': 'test',
},
initialize: function() {
},
index: function() {
customFunction();
indexView.render();
},
test: function() {
customFunction();
testView.render();
},
});
I would like to have it something like this:
var AppRouter = Backbone.Router.extend({
routes: {
'' : 'index',
'test': 'test',
},
initialize: function() {
},
index: function() {
indexView.render();
},
test: function() {
testView.render();
},
change: function() {
customFunction();
}
});
Does anyone have any suggestions?
Whenever a route is matched by the Router, a route:[name] event is fired with the name of the route matched, to allow classes to listen to certain route matches. All backbone objects also support the all event which fires whenever an event does.
So you could make use of this to bind to the all event on the Router, which will fire whenever the router does some routing.
initialize: function() {
this.bind( "all", this.change )
},
If you were interested in the route that matched, it is passed as the first parameter to the bound function.
More details here in the FAQ
A more (new) Backbone way of writing the bind is:
initialize: function() {
this.listenTo(this, "all", this.change )
},
a better listen would be just route if you ask me; Because all triggers two events, i think these:
"route:[name]" (params) — Fired by the router when a specific route is
matched.
"route" (route, params) — Fired by the router when any route
has been matched.
I am new to backbone. Following Laurens answer, I managed to call on each route change with below
app_router.on('route', function(e){
console.log(e);
});
Related
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.
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');
});
});
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:
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" })
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.