Hello World

This is an extremely simple application that shows the very basics of how things fit together in gaffa.

var Gaffa = require('gaffa');
var gaffa = new Gaffa();

// Set up model

gaffa.model.set({
  thing: 'stuff'
});

// grab viewItem constructors

// Views
var Textbox = require('gaffa-textbox');
var Label = require('gaffa-label');

// Actions
var Remove = require('gaffa-remove');

// register constructors with gaffa

gaffa.registerConstructor([
    Textbox,
    Label,
    Remove
]);

// set up the app -----------------------------------------------------------------------------------

// set a value based on the length of an array
var deleteValue = new Remove();
deleteValue.target.binding = '[thing]';

// a textbox to modify the model value.
var thingBox = new Textbox();
thingBox.value.binding = '[thing]';

// a label to show the result.
var thingLabel = new Label();
thingLabel.text.binding = '(? (>= (length [thing]) 5) "Less than or equal to 5 characters" "More than 5 characters")';


// On click of the label, call deleteValue.
thingLabel.actions.click = [deleteValue];

window.onload = function(){
    // add views to gaffa
    gaffa.views.add([
        thingBox,
        thingLabel
    ]);
};