With these views in place, we're almost ready to start the router. Open the router.js
file from the public
directory. Now, in the previous chapter, we were using Marionette, and it gave us regions and layouts to manage where our views went. We don't have them now, but since they were so useful, why don't we make them ourselves? We can create it with the following code:
function Region(selector) { this.el = $(selector); } Region.prototype.show = function (views) { if (!_.isArray(views)) { views = [views]; } this.el.empty(); views.forEach(function (view) { this.el.append(view.render().el); }.bind(this)); };
When we create a region, we'll pass it a selector. Then, the show
method will take one or more views. If we pass only a single view, we'll wrap it in an array. Then, we'll loop and append each view to the element. Notice that we're calling the render
method and getting the element for the views here, so we only have to pass the view instance to this method...