Gallery

YUI({filter: 'raw'}).use('gallery-binding', 'dump', 'event', 'cssbutton', function(Y) {
    Y.log('start ...');
    var binding = new Y.Binding.DataBinding();
    // binding anything by hand
    binding.bindProperty('#txtName', 'value', 'person.name', 'change');
 
    // use auto bind
    binding.bindAll('#form1');
    binding.bindAll('#form2');
 
    // come control values
    var all = Y.one('#all'), path = Y.one('#path'), newValue = Y.one('#newValue');
    binding.after(Y.Binding.DataBinding.Event.Change, function(e) {
        all.set('value', Y.dump(binding.getData()));
        path.setContent(e.attrName); // or e.path
        newValue.setContent(e.newVal);
    });
 
    all.set('value', Y.dump(binding.getData()));
 
    Y.one('#cmdDestroy').on('click', function(e) {
        // well YUI is not able to destroy simply sub nodes
        // means we need to code this on our own here:
        Y.one('#form2').get('children').each(function (node) {
            node.destroy();
        });
 
        Y.one('#form2').setAttribute('style', 'background-color: red');
    });
});