The View
Let’s start with what we can click and see: The View. It’s important to note that the View should only do one thing, and that’s display data. Ideally, no application logic will find itself in the View at all. Logic is for the Controller to worry about, all we need to worry about is showing data to the user, and capturing user feedback – usually mouse clicks, text input, drag and drops, etc.
The Display
Our demo View simply displays text messages that are given to it and captures button clicks from the user, and that’s it. 🙂 So let’s dive into the code – that’s view.js for those of you following along at home:
/** * a box to put our incoming messages */ var $messages = $("<div style='height:130px; overflow: auto;'></div>"); /** * show a simple text-only message * in the view */ this.message = function(str){ $messages.append(str + "<br>"); }
So far, everything is pretty straight forward. We’re just creating a div to put our messages, and as new messages arrive in the View, we’ll simply append them. It’s the next few lines start to get more interesting…
User Input
Now it’s time to manage user input into the View.
/** * set up the buttons to load data */ $console.append($("<input type='button' value='Load All'></input>").click(function(){ that.notifyAllClicked(); })); $console.append($("<input type='button' value='Load One'></input>").click(function(){ that.notifyOneClicked(); })); $console.append($("<input type='button' value='Clear Cache'></input>").click(function(){ that.notifyClearAllClicked(); })); $console.append($("<input type='button' value='Clear Console'></input><br><br>").click(function(){ $messages.empty(); })); $console.append($messages);
These few lines are creating the View’s buttons! Four shiny buttons for the user to click on, and when he (or she!) does, we’ll notify our listeners what’s happened. No mess, no logic, no ajax – just simple.
Listening to the View
So who are these listeners anyways? Keep an eye on the notify() functions, we’ll come back to those in just a moment. But right now, if we skip ahead to line 83 we’ll see how to create some new View Listeners…
/** * let people create listeners easily */ ViewListener: function(list) { if(!list) list = {}; return $.extend({ loadAllClicked : function() { }, loadOneClicked : function() { }, clearAllClicked : function() { } }, list); }
This function might look a bit tricky, but all that’s happening is this: the user can call this function without any parameters, and a blank Listener will be returned. By “blank” I just mean a listener with empty functions.
But one could also pass in an object with pre-defined functions for any of the Views events. In that case, any missing functions would simply be filled in with empty functions. The return value of this function is always an object that has at least loadAllClicked(), loadOneClicked(), and clearAllClicked() defined.
The next step after creating a listener is to add that listener to the View, and this can be done by…
/** * add a listener to this view */ this.addListener = function(list){ listeners.push(list); }
simply calling addListener() of course! Now our View has everything it needs – buttons and listeners. But how do we actually notify all of our listeners when a button is clicked. The notifyAllClicked() function is as good an example of how we can notify our listeners when something happens.
/** * notify everone that the user wants * to load all the data */ this.notifyAllClicked = function(){ $.each(listeners, function(i){ listeners[i].loadAllClicked(); }); }
Simply loop through all of our listeners, and call the matching function. You can just as easily pass data to your listeners, and that’s exactly something we’ll do that next in the Model.
Summary
Now we’ve created a View who’s only job is to display information to the user and report user input. No application logic is in the View at all, that’s the job of the Controller. But next up, let’s take a look at the Model and figure out how to even load and manage data for our application.
Thanks a ton! Very clear code behind MVC concepts. Only a question: For a complex view, any templates technologies are needed? Or even, it is possible write clean code without these?