seanmonstar

MVC in MooTools: Views

This is another installment about how my MooTools MVC framework rocks. Check it out. If you’re interested in the first part, check out my write-up on using Models.

After you make the building blocks of your application, using Models, Views are how you display that information to a user. Having written a lot of JavaScript that adds content to the page, I know just how much it can suck. You typically have two options:

1. Concatenate a huge string of markup with variables, then setting the innerHTML of a div.
2. Use a bunch of document.createElement and el.appendChild, ad infinitum.

Both are equally unappetizing. Wouldn’t it be so much nicer to write your views like we do in other languages?

Templating

Here’s a nice mix of HTML and JavaScript. No tricky string concatenation¹. You just have to put your JavaScript inside tags like you would in PHP.

<ul id="Tasks">
<% tasks.forEach(function(task) { %>

    <li class="task">
        <input type="checkbox" />
        <%= task.get('title') %>
        <% if(tag.get('tags').length) { 
            print(view('tasks/inline_tags', { tags: task.get('tags') }));
        } %>
    </li>

<% }); %>
</ul>

View.Helpers

Besides print, which does exactly what you think it does, there are a bunch of other functions that are sort of “globally” accessible from a View. And these are functions defined on View.Helpers. The most basic version of the helpers only includes a view function, which let’s you nest views inside each other, like I used above. If you include the View.Helpers file, you get more functions, such as excerpt (truncates to a certain length) and date (allows date formating similar to PHP’s date method). As I find more basic functions that you would want in a templating system, I’ll add more, such as possibly something like escape.

The File

These are saved as .html files. You don’t need to manually include them like Models or Controllers; the View class will first check to see if they’ve been included, and if not, go and fetch them over the wire. And they go in you app’s views folder. The example above would have a structure like so:

js/
    views/
        tasks/
            list.html

The View Class

The View Class is what converts templates into views for your application. You can instantiate a View, and then pass it data and ask for it to process itself using the passed data.

var myView = new View('tasks/list').render({ tasks: myTasks });
myEl.grab(myView);
myOtherEl.set('html', myView);

Views have both a toElement and toString function defined to return the processed mark-up in the proper format. This means you can simply pass the view as a parameter to most MooTools Element methods, and it just works².

Good news, though: Controllers have a convenience method called view that really makes this a joy to use. I’ll have more to say about Controllers in my next report.