Use of MakeNode

gistfile1.js

YUI.add(
    "ep-w-work_entry-duration-base",
    function (Y) {
        var Clazz = Y.namespace("EP.W.WorkEntry.Duration").Base = Y.Base.create(
            "ep-w-work_entry-duration-base",
            Y.Widget,
            [ Y.MakeNode, Y.IC.ModelConsumer ],
            {
                BOUNDING_TEMPLATE: '<tr></tr>',
                CONTENT_TEMPLATE:  null,

                bindUI: function () {
                    Y.log(Clazz.NAME + "::bindUI");
                    var eh;

                    eh = this.after("ep_m_work_entry_duration:destroy", this.destroy, this);
                    this._eventHandles.push(eh);
                
                    eh = this.after(
                        "ep_m_work_entry_duration:durationChange",
                        function (e) {
                            Y.log(Clazz.NAME + "::bindUI - ep_m_work_entry_duration:durationChange");
            
                            // TODO: this needs to set our select boxes to the proper amount *unless* there is src of ui
                            //       which probably means we need to set a source when setting the value
                            this._amtContentNode.setContent(this.get("model").asDecimal());
                        },
                        this
                    );
                    this._eventHandles.push(eh);
                },

                syncUI: function () {
                    Y.log(Clazz.NAME + "::syncUI");
                    // TODO: pre-select option in h/m selects

                    this._amtContentNode.setContent(this.get("model").asDecimal());
                },
                
                _afterAmtSelectChange: function (e) {
                    Y.log(Clazz.NAME + "::_afterAmtSelectChange");
                    var duration = this._amtHourNode.get("value") + ":" + this._amtMinuteNode.get("value") + ":00";
    
                    this.get("model").set("duration", duration);
                } 
            },
            {
                ATTRS: {
                    strings: {
                        value: {
                            hourLabel:   "h",
                            minuteLabel: "m"
                        }
                    },
                    model: { value: null, setter: '_setM', mClass: Y.EP.M.WorkEntry.Duration.Base }
                },

                _CLASS_NAMES: [
                    "labelContainer",
                    "amtContainer",
                    "amtContent",
                    "amtSelectsContainer",
                    "amtHour",
                    "amtMinute"
                ],

                _TEMPLATE: [
                    '<td class="{c labelContainer}">{n @ model @ kind p display_label}</td>',
                    '<td class="{c amtContainer}">',
                        '<span class="{c amtContent}"></span>',
                        '<span class="{c amtSelectsContainer}">',
                            '<select class="{c amtHour}">',
                                '<option value="0">0</option>',
                                '<option value="1">1</option>',
                                '<option value="2">2</option>',
                                '<option value="3">3</option>',
                                '<option value="4">4</option>',
                                '<option value="5">5</option>',
                                '<option value="6">6</option>',
                                '<option value="7">7</option>',
                                '<option value="8">8</option>',
                                '<option value="9">9</option>',
                                '<option value="10">10</option>',
                                '<option value="11">11</option>',
                                '<option value="12">12</option>',
                                '<option value="13">13</option>',
                                '<option value="14">14</option>',
                                '<option value="15">15</option>',
                                '<option value="16">16</option>',
                                '<option value="17">17</option>',
                                '<option value="18">18</option>',
                                '<option value="19">19</option>',
                                '<option value="20">20</option>',
                                '<option value="21">21</option>',
                                '<option value="22">22</option>',
                                '<option value="23">23</option>',
                            '</select>{s hourLabel}',
                            '&nbsp;',
                            '<select class="{c amtMinute}">',
                                '<option value="00">00</option>',
                                '<option value="15">15</option>',
                                '<option value="30">30</option>',
                                '<option value="45">45</option>',
                            '</select>{s minuteLabel}',
                        '</span>',
                    '</td>',
                ].join(""),

                _EVENTS: {
                    amtHour:   { type: "change", fn: "_afterAmtSelectChange" },
                    amtMinute: { type: "change", fn: "_afterAmtSelectChange" }
                }
            }
        );
    },
    "0.0.1",
    {
        requires: [
            "ep-w-work_entry-duration-base-css",
            "widget",
            "gallery-makenode",
            "ic-model-consumer"
        ]
    }
);