Demonstrating some of tie's functionality.

tie.js

/*
 Tie lets you cross-bind form elements and controllers with models.  
 This means that by changing a model attribute, you it will
         automatically update controllers or form elements.
 This also means that if a 'change' event happens on the
         element, it will automatically update the model attribute.

 Lets see an example:
 */

$.Model("Person")

var person = new Person({age: 5});

$('input:first').tie(person,'age');

/*
 When this code is run, it will automatically set the input's value to 5.
 If I do the following ...
 */

person.attr('age',7);

/*
 ... It will update the input element.

 If I change the input element manually, it will effectively do a:
 */

person.attr('age',$('input:first').val());

/*
 Later will show how you can integrate tie with Model's validations so that
 if the user sets the age to something invalid, tie will set it back to the
 previous value.

 But, for now, lets see how this works with Controllers!

 For form elements, tie uses $(el).val() to get and set values and listens
 for change events to know when the input element has changed.  

 For controller, it's basically the same way.  Your controller only has to 
 do 2 things:
 
 1. implement a val function that take an optional value.
    If a value is provided, it should update the UI appropriately;
    otherwise, it should return the value:
 */

$.Controller('Rating',{
  val : function(value){
    if(value !== undefined){
      //update the UI
    }else{
      //return the value
    }
  }
})

/*
 2. When the model should be updated, trigger a change event
    with the new value:
 */

    this.element.trigger('change',7);

/*
  Here's a slider widget implemented this way:
  https://github.com/jupiterjs/mxui/blob/master/slider/slider.js
  Notice in dropend, it triggers a change with the value of the slider.

  You could tie a slider to a person's age like:
 */

$('#slider').mxui_slider().tie(person,'age');

/*
 Reads pretty well doesn't it!

 Here's how we could setup our model to validate ages:  
 */

$.Model.extend("Person",{
  setAge : function(age, success, error){
    age =  +(age);
    if(isNaN(age) || !isFinite(age) || age < 1 || age > 10){
       error()
    }else{
       return age;
    }
  }
});

/*
 This checks that age is a number between 1 and 10.  You could also 
 use the validations plugin for this.
 
 If setAge made an Ajax request to the server, you would call
 success(finalAge) instead of returning the correct value.
 */

Here's the slider widget: https://github.com/jupiterjs/mxui/blob/master/slider/slider.js