View extension to support a simple Parent -> [ Child, Child, Child ] structure for Views

extension-view-parent.js

/*global YUI:true */
YUI.add("extension-view-parent", function(Y) {
    var ViewParent;
    
    ViewParent = function() {};
    ViewParent.ATTRS = {
        views  : {
            value : false
        },
        render : {
            value : "before",
            validator : function(value, name) {
                return (value === "before" || value === "after");
            }
        }
    };
    
    ViewParent.prototype = {
        initializer : function(config) {
            var render = this.get("render");
            
            this._parentHandles = [
                //Make sure new child views bubble
                this.on("viewsChange", this._viewsChange, this),
                
                //attach before or after render
                Y.Do[render](this._render, this, "render", this),
                
                //attach child events
                Y.Do.after(this._attachEvents, this, "attachEvents", this)
            ];
            
            //catch initial values of views ATTR
            this._viewsChange({
                newVal : this.get("views")
            });
        },
        
        //destroy child views & clean up all handles
        destructor : function() {
            Y.Object.each(this.get("views"), function(view) {
                view.destroy();
            });
            
            new Y.EventTarget(this._parentHandles).detach();
            
            delete this._parentHandles;
        },
        
        _render : function() {
            var data = {};
            
            //render all the child views, get their HTML
            Y.Object.each(this.get("views"), function(view, key) {
                data[key] = view.render().get("container").getHTML();
            });
            
            this.set("children", data);
        },
        
        //make sure custom events from child views bubble to parent view
        _viewsChange : function(e) {
            Y.Object.each(e.newVal, function(view) {
                //Only want to add ourselves as a bubble target once
                if(!view._bubbled) {
                    view.addTarget(this);
                    
                    view._bubbled = true;
                }
            }, this);
        },
        
        //attach child view events to the main container
        _attachEvents : function(events) {
            var container = this.get("container"),
                views = this.get("views"),
                owns = Y.Object.owns,
                attached = this._attachedViewEvents;
            
            //this is very similar to the implementation in attachEvents, unsurprisingly
            Y.Object.each(views, function(view) {
                var events = view.events,
                    handler, handlers, name, selector;
                
                for(selector in events) {
                    if(!owns(events, selector)) {
                        continue;
                    }
                    
                    handlers = events[selector];

                    for(name in handlers) {
                        if(!owns(handlers, name)) {
                            continue;
                        }
                        
                        handler = handlers[name];

                        if(typeof handler === 'string') {
                            handler = view[handler];
                        }
                        
                        attached.push(container.delegate(name, handler, selector, view));
                    }
                }
            });
            
            return this;
        }
    };
    
    Y.namespace("GW2.Extensions").ViewParent = ViewParent;
    
}, "@VERSION@", {
    requires : [
        "view",
        "node-event-delegate"
    ]
});

view-home-lists.js

/*global YUI:true */
YUI.add("view-home-list", function(Y) {
    var Templates = Y.namespace("GW2.Templates");
    
    Y.namespace("GW2.Views").HomeList = Y.Base.create("homeListView", Y.View, [], {
        template : Templates["home-list"],
        
        events : {
            ".browse" : {
                click : "_clickBrowse"
            }
        },
        
        render : function() {
            var items = this.get("models");
            
            this.get("container").setHTML(this.template({
                type  : this.get("type"),
                title : this.get("title"),
                items : items.toJSON()
            }));
            
            return this;
        },
        
        _clickBrowse : function(e) {
            e.preventDefault();
            
            this.fire("search", {
                search : {
                    tag : e.currentTarget.getData("tag")
                }
            });
        }
    }, {
        ATTRS : {
            type  : null,
            title : null
        }
    });
    
}, "@VERSION@", {
    requires : [
        "base",
        "view",
        "gw2-template-home-list",
        "gw2-template-home-item",
        "gw2-template-item-buttons"
    ]
});

view-home.js

/*global YUI:true */
YUI.add("view-home", function(Y) {
    var L = Y.Lang,
        gw2 = Y.namespace("GW2"),
        Views = Y.namespace("GW2.Views"),
        Extensions = Y.namespace("GW2.Extensions");
    
    Views.Home = Y.Base.create("homeView", Y.View, [
        Extensions.ViewParent
    ], {
        template : Y.namespace("GW2.Templates").home,
        
        initializer : function(config) {
            this.set("views", {
                carousel : new Views.HomeCarousel({
                    models : config.carousel
                }),
                
                featured : new Views.HomeList({
                    type   : "featured",
                    models : config.featured
                }),
                
                hot : new Views.HomeList({
                    type   : "hot",
                    models : config.hot
                }),
                
                sidebar : new Views.HomeSidebar({
                    history : config.history
                })
            });
        },
        
        //NO-OP
        destructor : function() {},
        
        render : function() {
            this.get("container").setContent(this.template(this.get("children")));
            
            return this;
        }
    }, {
        ATTRS : {
            items : null
        }
    });
    
}, "@VERSION@", {
    requires : [
        "base",
        "view",
        "view-home-carousel",
        "view-home-list",
        "view-home-sidebar",
        "extension-view-purchasing",
        "extension-view-classer",
        "extension-view-tooltips",
        "tabview",
        "scrollview",
        "scrollview-paginator",
        "gw2-template-home"
    ]
});