How to define and trigger Backbone route with get params? - javascript

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.

Related

How do I supply an index route with a template Ember 2?

I want to create an ember application as follows:
var app = Ember.Application.create({
rootElement: document.getElementById('root'),
name: 'my-application',
IndexRoute: Ember.Route.extend({
model: function() {
console.log('model');
},
afterModel: function(model, transition) {
},
template: Ember.Handlebars.compile('<div id="test"></div>'),
}),
locationType: 'hash',
});
The problem is that I dont get the test div in the DOM. How come?
http://jsbin.com/koyihapuze/edit?html,js,console,output
1) in your code this.namespace.TEMPLATES is undefined ( inside resolver ) so you
Fix code like
resolveTemplate: function(parsedName) {
var templatePath = parsedName.fullNameWithoutType.replace('.', '/');
var template = this.namespace.TEMPLATES && this.namespace.TEMPLATES[templatePath];
if (!template) {
template = this._super(parsedName);
}
return template;
},
After you'll find new div.ember-view element inside application container
2) template is not property of route ( as in your code ), you can define ApplicationView with template or templateName in router and solve resolver errors
P.S. It's better to start with Ember using ember-cli

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

Backbone.js trigger function each time Router is used

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

Categories