Commit 4ae8c9f6 authored by Sam Saccone's avatar Sam Saccone

Remove use of deprecated AppRegions.

Marionette has marked `appRegions` as a deprecated feature because it is a
leaky abstraction for the Application to know so much about the DOM and
the structure of your actual page.
Instead of using `appRegions`, Marionette encourages you to setup a
RootLayout whose concern is setting up render targets.

In the near future we are introducing the concept of a "root" to the
application object
https://github.com/marionettejs/backbone.marionette/issues/2279

So that uses will have an idiomatic way of using this pattern. The goal
here is not to conflate the concerns of splitting up render targets
with your application, rather the goal is to give users a pattern to follow when
setting up a single or multiple application objects.

Fixes #1171
Fixes #1184
parent 9d98ba63
...@@ -2,6 +2,16 @@ ...@@ -2,6 +2,16 @@
'use strict'; 'use strict';
TodoMVC.module('Layout', function (Layout, App, Backbone) { TodoMVC.module('Layout', function (Layout, App, Backbone) {
Layout.Root = Backbone.Marionette.LayoutView.extend({
el: '#todoapp',
regions: {
header: '#header',
main: '#main',
footer: '#footer'
}
});
// Layout Header View // Layout Header View
// ------------------ // ------------------
Layout.Header = Backbone.Marionette.ItemView.extend({ Layout.Header = Backbone.Marionette.ItemView.extend({
......
...@@ -34,18 +34,18 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette) { ...@@ -34,18 +34,18 @@ TodoMVC.module('TodoList', function (TodoList, App, Backbone, Marionette) {
var header = new App.Layout.Header({ var header = new App.Layout.Header({
collection: todoList collection: todoList
}); });
App.header.show(header); App.root.showChildView('header', header);
}, },
showFooter: function (todoList) { showFooter: function (todoList) {
var footer = new App.Layout.Footer({ var footer = new App.Layout.Footer({
collection: todoList collection: todoList
}); });
App.footer.show(footer); App.root.showChildView('footer', footer);
}, },
showTodoList: function (todoList) { showTodoList: function (todoList) {
App.main.show(new TodoList.Views.ListView({ App.root.showChildView('main', new TodoList.Views.ListView({
collection: todoList collection: todoList
})); }));
}, },
......
...@@ -3,7 +3,13 @@ ...@@ -3,7 +3,13 @@
// TodoMVC is global for developing in the console // TodoMVC is global for developing in the console
// and functional testing. // and functional testing.
window.TodoMVC = new Backbone.Marionette.Application(); var App = Backbone.Marionette.Application.extend({
setRootLayout: function() {
this.root = new TodoMVC.Layout.Root();
}
});
window.TodoMVC = new App();
(function () { (function () {
var filterState = new Backbone.Model({ var filterState = new Backbone.Model({
...@@ -15,12 +21,7 @@ window.TodoMVC = new Backbone.Marionette.Application(); ...@@ -15,12 +21,7 @@ window.TodoMVC = new Backbone.Marionette.Application();
}); });
})(); })();
TodoMVC.addRegions({
header: '#header',
main: '#main',
footer: '#footer'
});
TodoMVC.on('start', function () { TodoMVC.on('start', function () {
TodoMVC.setRootLayout();
Backbone.history.start(); Backbone.history.start();
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment