So, what’s this whole MVC thing? You could try reading the Wikipedia article but it might be a little abstract. In practice MVC is really nothing more than separating your applications data (model) and presentation (view).
But why would you do such a thing? The most important reason is maintainability, your code becomes more readable and, hence, more maintainable. You’ll also notice that you will become a better programmer, and it becomes easier to add features to a project.
This still might sound a little abstract, so let’s write some code! We’ll be using a super tiny MVC framework called Stapes.js which, not completely coincidental, is something i wrote myself to learn MVC. Stapes is pretty relaxed about how you structure your code, so this approach is just one approach. Feel free to structure your code in every way you want.
We’ll be writing a really simple todo (task list) application. There’s actually a really cool project called TodoMVC that collects todo examples written in multiple frameworks (here’s the one for Stapes). However, those examples are usually pretty complicated and might not give you the best introduction to MVC. So’ll we be doing something a lot simpler in this tutorial.
We’ll start by setting up a HTML file. Open your favorite text editor and copy-paste this code, and save it as
app.js and save it in the same directory.
Okay, let’s set up our
TodoContoller using the
Try reloading your webbrowser and entering a todo in the input field. If all went well you should be seeing new todos appearing.
Analyzing the code
Let’s analyze this code a little bit.
With Stapes it doesn’t really matter what you call your objects. Other MVC frameworks might force you into using pre-defined models or views. That’s not a bad thing per se, but with Stapes the philosophy is that you can manage conventions for yourself. So’ll we just end the module variable names with Model or View to indicate the type.
subclass function creates a new class that you can later instantiate with
new. Note how we have a property called
constructor. This is the function that is executed when calling
new and that you use to setup properties. All other properties in the object given to
subclass become part of the class prototype.
Let’s take a look at the
constructor exists of an event handler for the input field.
On to the code in
constructor: note that we use the
this is scoped to the global
window variable instead of the current object.
bind on functions is included in all modern browsers, but if you’re using an older browsers (such as Internet Explorer 8) you might need to include a polyfill like the one from MDN.
Here’s the most important line of the view:
$input.val() gets the todo we entered in the input field. The
push method of the model adds the todo to its internal data store and automatically assigns an unique id. This action also does something else, it triggers a
change event that can be used to update a view. We listen to this event in the
Some methods automatically trigger events, such as
push. An event can contain event data in the callback, which you can see in this example. The
todoId variable holds the unique id the model automatically assigned when we did the
push in the
We want to get the text for this todo, so we use
get on the model to get the todo text. We then append it using jQuery to the
Wrapping it up
Here’s Model-View-Controller in its most basic form: a user action triggers an
event, that is used to update the model. The model fires a ‘change’ event, which is used by the controller to update the view.
If you want to experiment with this example try the jsFiddle i’ve setup.
Hungry for more? Read the second part of this tutorial and i’ll show you how to use templating, remove todos and save the todos to localStorage.