widget attributeMap + dojo.delegate example

In response to http://www.enterprisedojo.com/2010/10/02/lessons-in-widgetry-binding-property-values-to-dom-nodes-in-templates/

by Reusablecode

CSS

.test div {
    padding-bottom: 15px;
}

JavaScript

dojo.require('dijit._Widget');
dojo.require('dijit._Templated');

dojo.ready(function() {
    //a simple widget for example
    dojo.declare('SimpleWidget', [dijit._Widget, dijit._Templated], {
        first: 'hello',
        second: 'world',
        
        attributeMap: {
            first: {node: 'firstNode', type: 'innerHTML'},
            second: {node: 'secondNode', type: 'innerHTML'}
        },
                 
        templateString:
            '<div><span dojoAttachPoint="firstNode"></span>, <span dojoAttachPoint="secondNode"></span>!</div>'
    });
    
    //pardon the repetition, I figured it's easier in this case to draw
    //comparison.  Pay particular attention to how attributeMap is defined.
    dojo.declare('BetterWidget', [dijit._Widget, dijit._Templated], {
        first: 'hi',
        second: 'mom',
        
        attributeMap: dojo.delegate(dijit._Widget.prototype.attributeMap, {
            first: {node: 'firstNode', type: 'innerHTML'},
            second: {node: 'secondNode', type: 'innerHTML'}
        }),
                 
        templateString:
            '<div><span dojoAttachPoint="firstNode"></span>, <span dojoAttachPoint="secondNode"></span>!</div>'
    });
    
    var n = dojo.place('<div class="test"></div>', dojo.body());
    
    var w1 = new SimpleWidget().placeAt(n);
    w1.startup();
    console.log(w1.attributeMap);
    w1.set('title', 'blah');
    
    var w2 = new BetterWidget().placeAt(n);
    w2.startup();
    console.log(w2.attributeMap);
    w2.set('title', 'blah');
});