I'm trying to pass a URL as a parameter to the backbone router class but it just won't trigger the callback, when passing non-url string, it does trigger it.
var Workspace = Backbone.Router.extend({
routes: {
"myurl/:url": "myurl"
},
myurl: function(url) {
alert('parameter passed: ' + url);
},
});
it works well when linking to
#/myurl/hello-world
but nothing happens when linking to
#/myurl/http://www.somewebsite.com/folder?withparameter=123
Found it. replace :parameter with *parameters so in my case:
routes: {
"myurl/:url": "myurl"
},
should be
routes: {
"myurl/*url": "myurl"
},
Related
This is the first time I am using Backbone and I seem to be stuck on the basics, so bear with me.
I just want to use Backbone for Routing, I'm currently testing it within the News section of my site but I can't get the routes to trigger the functions I want.
Here' my code:
var NewsRouter = Backbone.Router.extend({
routes: {
"*news": "init",
"news:tmpl": "loadTemplate",
},
init: function(params) {
//$("#main").load("/news/all");
console.log('news called')
},
loadTemplate: function(tmpl) {
console.log('loadTemplate function called')
}
});
var news_router = new NewsRouter;
Backbone.history.start();
I have this route working fine:
mysite.dev/news/ - console shows "news called"
mystic.dev/news/interviews - should call loadTemplate()
What am I mssing?
You missed slash after "news" in the route for 'loadTemplate':
"news/:tmpl": "loadTemplate",
Note that in your case router is configured only for hash-based navigation (like '#news/interviews' ). You may enable URL-based navigation by specifying additional options for 'start' method:
Backbone.history.start({ pushState: true });
I've tested. This works.
var NewsRouter = Backbone.Router.extend({
routes: {
"news": "init",
"news/:tmpl": "loadTemplate",
},
init: function(params) {
//$("#main").load("/news/all");
alert('news called');
},
loadTemplate: function(tmpl) {
alert('loadTemplate function called: ' + tmpl);
}
});
var news_router = new NewsRouter;
Backbone.history.start();
Only updated below part.
routes: {
"news": "init",
"news/:tmpl": "loadTemplate",
},
Basically, you also need to remove * (asterisk) apart from missing slash as answered by #Vitaliy Fedorchenko.
Backbone code is not as complex as jQuery. It's pretty readable. So best thing is go to code and read rather than finding documentation. I don't understand regex as much, but if you see splatParam variable, I think it is treating asterisk as wild match. Anyone can please correct me if I'm wrong.
I'm developing an application for android using require js and Backbone. I have to pass a model taken from a collection via touchend event to the router. How can I do it?
define(["jquery", "underscore","backbone","handlebars", "views/CinemaView", "models/CineDati", "text!templates/listacinema.html"],
function($,_,Backbone,Handlebars,CinemaView, CineDati, template){
var ListaCinemaView = Backbone.View.extend({
template: Handlebars.compile(template),
events: {
"touchend" : "Details"
},
initialize : function (){
var self = this;
$.ajax({
url: 'http://www.cineworld.com/api/quickbook/cinemas',
type: 'GET',
data: {key: 'BwKR7b2D'},
dataType: 'jsonp', // Setting this data type will add the callback parameter for you
success: function (response, status) {
// Check for errors from the server
if (response.errors) {
$.each(response.errors, function() {
alert('An error occurred. Please Try Again');
});
} else {
$.each(response.cinemas, function() {
var cinema = new CineDati();
cinema.set({ id : this.id, name : this.name , cinema_url : this.cinema_url, address: this.address, postcode : this.postcode , telephone : this.telephone });
self.model.add([cinema]);
});
self.render();
}}
});
},
events : {
"#touchend" : Dettagli
},
render : function(){
$(this.el).empty();
$(this.el).html(template).append(
_.each(this.model.models, function (cinema) {
$("#lista").append(new CinemaView({
model: cinema
}).render().el); }, this));
return this;
},
Dettagli : function(){
Backbone.history.navigate( this.model , {trigger: "true"});
}
});
return ListaCinemaView;
});
You need to override the Backbone's navigate function as following:
var Router = Backbone.Router.extend({
routeParams: {},
routes: {
"home": "onHomeRoute"
},
/*
*Override navigate function
*#param {String} route The route hash
*#param {PlainObject} options The Options for navigate functions.
* You can send a extra property "params" to pass your parameter as following:
* {
* params: 'data'
* }
**/
navigate: function(route, options) {
var routeOption = {
trigger: true
},
params = (options && options.params) ? options.params : null;
$.extend(routeOption, options);
delete routeOption.params;
//set the params for the route
this.param(route, params);
Backbone.Router.prototype.navigate(route, routeOption);
},
/*
*Get or set parameters for a route fragment
*#param {String} fragment Exact route hash. for example:
* If you have route for 'profile/:id', then to get set param
* you need to send the fragment 'profile/1' or 'profile/2'
*#param {Any Type} params The parameter you to set for the route
*#return param value for that parameter.
**/
param: function(fragment, params) {
var matchedRoute;
_.any(Backbone.history.handlers, function(handler) {
if (handler.route.test(fragment)) {
matchedRoute = handler.route;
}
});
if (params !== undefined) {
this.routeParams[fragment] = params;
}
return this.routeParams[fragment];
},
/*
* Called when hash changes to home route
**/
onHomeRoute: function() {
console.log("param =", this.param("home"));
}
})
Here I have written a custom function "param" for doing the get/set of parameters you want to send.
Now to send a custom parameter you can send it like the following:
var router = new Router();
Backbone.history.start({});
router.navigate("home", {
params: 'Your data'
});
To retrieve the data in get data inside the callback function you can write code like this:
this.param("home"); //this will return the parameter you set while calling navigate function or else will return null
Router.navigate() doesn't pass any data. It sets the url fragment and takes a couple options. See the docs here: http://backbonejs.org/#Router-navigate
My suggestion:
Use Router.navigate() to change the URL.
Use the Backbone.Events aggregator to trigger (or publish) your event and data.
So say you have a list of movies, and you have a view button. The view button publishes the model it wants shown and changes the URL fragment.
var vent = _.extend( {}, Backbone.Events ); // Create your app specific event aggregator
var ListaCinemaView = Backbone.View.extend({
...
Dettagli : function(){
vent.trigger('movie:show:request', this.model);
Backbone.history.navigate( this.model.get('id') );
}
}
Somewhere else in your app add a handler for movie:view:request.
vent.on('movie:show:request', showMovieDetails);
var showMovieDetails = function(model) { ... }
Lastly, check out MarrionetteJS. It uses the publish/subscribe pattern to handle communication between parts of an app. It's a really nice framework since you basically opt-in to the parts that you want to use. It's very well documented and supported. Also, its creator, Derick Bailey, is very active on Stackoverflow, so you'll get help quick.
I am using backbone.js routes and i am struggling to make history to work. Here is the code i have:
$(function() {
var AppRouter = Backbone.Router.extend({
routes: {
"/": "initHome",
"home": "initHome",
"projects": "initProjects",
"project/:id" : "initProject"
}
});
// Instantiate the router
var app_router = new AppRouter;
app_router.on('route:initProject', function (id) {
// Note the variable in the route definition being passed in here
getContent("project",id);
});
app_router.on('route:initProjects', function () {
getContent("projects");
});
app_router.on('route:initHome', function () {
getContent("home");
});
// SINGLE PAGE MAGIC
$(document).on("click",".links",function(e) {
var href = $(this).attr("href");
var url = lang + "/" + href;
page = $(this).attr("data-id");
var param = $(this).attr("data-param");
if (typeof(param) == 'undefined') { param = ""; }
if(activepage != href && !main.hasClass("loadingPage")){
loader.show();
firstInit = false;
activepage = href;
res = app_router.navigate(url, true);
getContent(page,param);
}
return false;
});
Backbone.history.start({pushState: true, root: "/karlin/"});
});
Push state is working fine on click, but it wont call getContent() function when i try back/next buttons in the browser. I am an newbie to backbone, so any advice will be helpful.
Change this: res = app_router.navigate(url, true);
To this: app_router.navigate(url, {trigger: true});
I can't see any reason to create a variable "res".
IMHO you've got a convoluted implementation of Backbone. I'd suggest moving your routes to the constructor like so:
var AppRouter = Backbone.Router.extend({
routes: {
"/": "initHome",
"home": "initHome",
"projects": "initProjects",
"project/:id" : "initProject"
},
initProject: function (id) {
// Note the variable in the route definition being passed in here
getContent("project", id);
},
initProjects: function () {
getContent("projects");
},
initHome: function () {
getContent("home");
}
});
// Instantiate the router
var app_router = new AppRouter;
Also, if you set up your routes properly like in the Backbone docs,
routes: {
"help": "help", // #help
"search/:query": "search", // #search/kiwis
"search/:query/p:page": "search" // #search/kiwis/p7
},
you can pass parameters to the routes with traditional links. You can also move your if activePage statement to the router as a helper function for changing pages.
Router.navigate is for rare instances.
I suggest, reading the Backbone docs over and over. I learn something new every time. There's a lot there and Backbone is doing things efficiently already. No need to reinvent the wheel.
Hope this helps!
I second Andrew's answer: your use of routing is a bit odd.
If you're interested in learning more about why, as Andrew says, "Router.navigate is for rare instances", read pages 32-46 here: http://samples.leanpub.com/marionette-gentle-introduction-sample.pdf
It's part of the sample for my book on Backbone.Marionette.js, but routing concepts remain the same. In particular, you'll learn why the default trigger value is false, and why designing your app routing with that in mind will make your apps better.
I have the following router defined, but the .route function doesn't seem to be setting. What am I doing wrong? Thanks, in advance, for the help.
# app.js.coffee
initialize: =>
router = new Backbone.Router
router.route "foo/:bar", "baz"
console.log router.routes # returns undefined
The routes you create using Router.route are stored internally in the History object -- they're not added to the Router.routes collection.
They still work though, see here for proof. Note that in this.routes, only the home route is defined, but you're still able to hit the baz route. You can see the baz route if you check Backbone.history.handlers, which is where the routes are actually stored.
var Router = Backbone.Router.extend({
initialize: function() {
this.route("foo/:bar", "baz");
},
routes: {
"": "home"
},
home: function() {
console.log("home hit");
},
baz: function(bar) {
console.log('test hit: ' + bar);
},
});
var router = new Router();
console.log(this.routes);
console.log(Backbone.history.handlers);
Backbone.history.start();
router.navigate("foo/testbar", { trigger: true });
Note though, I think you need to use this in your code, because router won't be defined yet inside initialize:
#route "foo/:bar", "baz"
For example I have:
(function (exports, $, _, CategoriesController) {
"use strict"
var App = exports.App;
App.Routers = {},
App.Routers.Index = Backbone.Router.extend({
routes: {
"category=:category": "category",
"*actions" : "defaultRoute"
},
page: function (pageNumber) {
App.CategoriesFilter.setPage(pageNum);
},
defaultRoute: function () {
alert('default');
}
});
}(window, jQuery, _));
But what if page number should be only integer? how to check it in the router? Is it possible? If not, - how to perform other action? Using navigate?
I've found a link that might be what you're looking for:
http://blog.rjzaworski.com/2011/12/regex-routing-with-backbone-js/