Skip to content

Instantly share code, notes, and snippets.

@hatched
Forked from tivac/_README.md
Created May 15, 2012 16:13
Show Gist options
  • Save hatched/2702964 to your computer and use it in GitHub Desktop.
Save hatched/2702964 to your computer and use it in GitHub Desktop.
View extension to support a simple Parent -> [ Child, Child, Child ] structure for Views
/*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"
]
});
/*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"
]
});
/*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"
]
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment