10
I'm developing a mobile application using RequireJS and Backbone.js. I'd like to specify the transition from one page to another by adding data-transition and data-direction attributes to each anchor (in the same way as with jQuery Mobile):
<a href="#home" data-transition="slide" data-direction="left">Go to the home page</a>
All my views extend a base view that attaches a click handler to anchors and catches the values of these attributes:
define([
'zepto',
'lodash',
'backbone'
], function ($, _, Backbone) {
'use strict';
BaseView = Backbone.View.extend({
events: {
'click a': 'navigate'
},
navigate: function (e) {
e.preventDefault();
var href = $(e.currentTarget).attr('href'),
transition = $(e.currentTarget).attr('data-transition'),
direction = $(e.currentTarget).attr('data-direction');
Backbone.history.navigate(href, true);
}
});
});
My problem is that I don't know how to pass these values to the route handlers of my router, defined as another module:
define([
'zepto',
'lodash',
'backbone'
], function ($, _, Backbone) {
'use strict';
var Router = Backbone.Thumb.Router.extend({
routes: {
'': 'home'
}
});
var initialize = function () {
var router = new Router();
router.on('route:home', function () {
require(['views/home'], function (HomeView) {
var homeView = new HomeView();
// Get the data-transition and data-direction attributes
// of the clicked anchor here:
// var transition = ???,
// direction = ???;
router.animate(homeView.render().$el, transition, direction);
});
});
Backbone.history.