А как насчет этого подхода?Поскольку базовая схема реализует шаблон шаблона во всех его 4 компонентах, с небольшим количеством дизайна вы можете предоставить каждому представлению простой механизм навигации по маршрутизатору приложения без необходимости делать какие-либо циклические ссылки (это было то, что я видел в других подобных постах, нопопытайтесь избежать этого).
Компонент маршрутизатора, мало чем отличающийся от других примеров маршрутизаторов:
define('Router', ['backbone', ... ],
function (Backbone, ...) {
var MyRouter = Backbone.Router.extend({
routes: {
'viewA': 'viewA',
'viewB': 'viewB'
},
initialize: function () {
...
};
},
viewA: function () {
...
},
viewB: function () {
...
}
});
return MyRouter;
});
Приложение создает экземпляр маршрутизатора и запускает первое представление, передавая этот экземпляр:
define('App', ['backbone', ...
], function (Backbone, ...) {
function initialize() {
//route creation
if (!this.routes)
routes = new Router(this);
//backbone history start
Backbone.history.start();
//ViewA navigation, bigbang
if (!this.viewA)
this.viewA = new ViewA({router: this.routes});
this.viewA.render();
}
return {
initialize: initialize
};
});
BaseView, определение базового конструктора для всех представлений, а также метод навигации:
define('BaseView', ['jquery', 'underscore', 'backbone', ...
], function ($, _, Backbone, ...) {
var BaseView;
BaseView = Backbone.View.extend({
id: '...',
constructor: function (options) {
this.router = options.router;
this.model = options.model;
Backbone.View.prototype.constructor.call(this);
},
initialize: function () {
this.template = _.template(tpl);
},
events: {
},
render: function () {
$(this.el).html(this.template());
return this;
},
//Provides transparent navigation between views throught the backbonejs
//route mechanism
navigate: function(pageId)
{
this.router.navigate(pageId, {trigger: true});
}
});
return BaseView;
});
Экземпляр представления, каждое представление расширяется от базового вместо базового и наследует базовое поведение:
define('ViewA', ['jquery', 'underscore', 'backbone', 'BaseView'
], function ($, _, Backbone, BaseView) {
var ViewA;
ViewA = BaseView.extend({
id: '...',
constructor: function (options) {
this._super("constructor");
},
...
foo: function()
{
...
this.navigate("viewB");
}
});
return ViewA;
});
Это работает для меня, а также его можно использовать в других проектах.