Views

Views update the DOM. jquery-claypool doesn't come with any view strategies because jquery already provides everything you need to gracefully manipulate the dom. there are also already several templating plugins for jquery like srender and jtemplates. There are a couple conventions you should know about so you can take full advantage of the view pattern in jquery-claypool

Views Are jQuery

It's true, they love the dom so much they attach themselves to it, and are in fact jQuery instances. how does this happen so magically? Well, if I have a view named 'Hello', it will automatically attach itself to the dom node with the id 'hello' when ever it appears in the dom (using live binding). This convention can be customized to allow a single view to attach to many nodes, but in general a view should be identified with a single node by id.

Views Are Attention Hogs

Its all about them, they want to always be in your spotlight, catching your attention, showing you shiny things, pestering you with text messages all day long. They don't care about any events or won't bother doing any work to get anything that's not handed to them on a silver platter. spoiled rotten.

think update

yes, think AND update. there is no steadfast rules, though by default the controller will pass the model to the view method 'update' unless you specify another method. we do recommend you usually have at least two methods for views though, so one method 'think' can be used to let the interface know the view is about to be updated. eg show a spinner or flash a color or block the ui component or display a message etc.

Building a jQuery View

Let's start by creating a simple closure that will define our view.

/*
 * @file app/views/hello.js
 * @description You can feel free to use your 
 *     own writing style, we are providing an
 *     example not a rigid requirement of how to
 *     you have to write views.  If you 
 *     want to take advantage of the mvc scanners
 *     (and keep the global scope clean) you should
 *     use a closure and single top-level namespace.
 *     In this example we use 'MyApp'
 */
(function($, $V){
    
    $V.Hello = function(options){
        $.extend(true, this, options);
    };

    $.extend($V.Hello.prototype, {
        update: function(model){
           //update the dom here
        }
    });
    
})(jQuery, MyApp.Views);

This is a good lazy view because it doesn't actively do anything when the anonymous closure is executed other than define itself.

A Presumptuous View

Lets start using this mvc thing a little but keep it real simple.

    update: function(model){
        // recall 'this' is a jquery context
        // because the instance is auto-magically
        // attached to $('#hello')
        $('.msg', this).text('Hi there world!');
    }
    

WoW! That was amazing! But very presumptuous, because I am not really the world just a modest fella...

A Thoughtful View

Lets dive in.

    think: function(){
        $('.msg', this).text('learning about you!');
    },
    update: function(model){
        $('.msg', this).text('Hi there '+model.username);
    }
    

OMG! How jquery-ish! indeed. To learn more just dive in!

model Built-Ins

The model will always include an array named 'flash'. this concept was lovingly borrowed from Rails. The array should be an array of objects, each object containing an hash of name/value pairs that are intended to provide feed back about incorrect or invalid user input or errors from controllers and models.

jTemplates Example

TODO anyone?

Srender Example

TODO anyone?

E4X Example

TODO i'll take this one!