HTML and CSS Reference
In-Depth Information
The Bootstrap and Controller
Unlike other MVC frameworks, the controller doesn't necessarily have to be
assigned to a route or URI/URL in JavaScript. In this topic, controllers can be
assigned to events too. A controller manages the flow of data through your
application, passes that information on to the view, and then is responsible for
rendering that back to the user using DOM manipulation. The controller is also
responsible for handling user events. In my previous attempts at creating an
MVC framework for JavaScript, events were handled outside of the controller,
which became cluttered. Common events (such as binding to links to trigger
controller actions) should be handled in one place; however, other unique events
(such as form events) should be bound by the controller itself. There are other
more efficient ways of doing this, but for the purpose of the application being
developed for this topic, it makes sense to do it this way. Other alternatives
include using a library called
Sammy.js
, which can be used to create restful URLs
based on hashbangs (e.g.,
index.html#/mypage
). Sammy can pick up these
URLs and then execute JavaScript based on routing rules. If you would like to
The construction of a controller is quite simple; it's simply an object with
privileged methods that act as event actions. A controller can be related to a
specific entity in your application. In MoMemo, there is a single controller to
manage movies and a controller to manage your favorites.
The Bootstrap
The bootstrap is a big object, as it handles delegating link events to various
parts of the application. It's responsible for initializing all of the controllers, and
becomes the one place to go to access controllers from the rest of the
application.
Begin by creating a new file within
js/
called
bootstrap.js
with the following
code.
var app = app || {};
app.bootstrap = (function(){
})();
Begin by declaring an instance variable called
_controller
.
var app = app || {};
