Separating presentation vs behavior

ui.js

collectionModel = /* could be from some model constructor with direct data array, from a query result, a URL, or whatever */

// first we bind the collectionModel to this TC, so there will be a child widget created for each item in the array
// the binding will handle observing the collection model for changes to add and remove children
bind(collectionModel, new TabContainer()) 
	.forEach(function(item){ // called for each child
	
		var cp = new ContentPane({}); // create the child widget to use (could be optional)
		var form = cp.domNode; // get the domNode to attach the children
		
		// now we bind the "name" property of this item to a TextBox (the view for that property model)
		bind(item, "name", new TextBox({}, form));
		
		// next bind the "socialSecurity" property to a validator class that handles validation, get back a validated model that can be used directly by the view
		var validatedSS = bind(item, "socialSecurity", new Validator({/*some validation reqs*/}));
		
		// now pass the validated property model to a text box (a validating text box, that doesn't do validation, but can display validation messages provided by the validator class).
		bind(validatedSS, new ValidatingTextBox({}, form));
		
		// we could also directly interact with the model:
		validatedSS.then(function(value){
			console.log("user entered a valid SS", value);
		});
		
		validatedSS.get("errorMessage", function(message){
			console.log("user entered an invalid SS", message);
		});
		
		// set the value (will update the rendered view)
		validatedSS.put("555-555-5555");
		
		// make a save button
		new Button({label: "save"}, form).on("click", function(){
			store.put(item);
		});
		
		// return the content pane for the tab container collection
		return cp;
	});
	
	
	
Simple context/model:
* then(callback) - Callback is called with the (primary) value of the model, once available, and each time it changes.
* get(key) - Get a property from the model (returns another model) (or get(key, callback) as shorthand for get(key).then(callback);
* put(value) - Sets the value of the model
* set(key, value) - short for get(key).put(value);

collection (like dojo store result set):
* forEach(), etc.
* observe(callback) - per dojo store observable


another example of validating behavior logic:

var model = new Model();
model.put(3); // set the value
model.set("minimum", 0);
model.set("maximum", 5);
model.set("type", "number");
var validated = bind(model, new Validator());
validated.get("errorMessage", function(message){
	console.log("error", message);
});
validated.put(5);// no error
validated.put(15); // reports an error

possible example of calendar split into behavior and presentation
// create a calendar model
var calendar = new CalendarModel({value: new Date()});
// calendar is then 2D collection of days on a 5x7 grid of numbers
bind(calendar, new CalendarView({})); // just responsible for rendering the grid of numbers

calendar.nextMonth(); // go to next month, the CalendarView would wire up the next arrow to this method
calendar.put(new Date()); // go to the current day