Skip to content

Instantly share code, notes, and snippets.

@jshirley
Created July 29, 2012 21:08
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jshirley/3201841 to your computer and use it in GitHub Desktop.
Save jshirley/3201841 to your computer and use it in GitHub Desktop.
AutoView, parse markup to fetch models and views accordingly.
YUI.add('tdp-autoview', function(Y) {
var NS = Y.namespace('TDP'),
View = Y.Base.create('tdpAutoView', Y.View, [], {
render : function() {
this.findViews();
return this;
},
refresh : function() {
return this;
},
renderViews : function() {
var views = this.get('views'),
models = this.get('models');
Y.Object.each( views, function(cfg, name) {
var Cons = NS[name];
views[name] = new Cons( cfg );
views[name].render();
});
},
findViews : function() {
var
views = this.get('views'),
models = this.get('models'),
nodes = this.get('container').all('*[data-view]'),
stack = new Y.Parallel();
nodes.each( function(node) {
var view = node.getData('view'),
model = node.getData('model'),
config = { container : node };
if ( model && ! models[model] ) {
models[model] = new NS[model]();
models[model].load( stack.add() );
config[model] = models[model];
}
views[view] = config;
});
stack.done( Y.bind(this.renderViews, this) );
}
}, {
ATTRS : {
views : { value : { } },
models : { value : { } },
container : { valueFn : function() { return Y.one('body'); } }
}
});
NS.AutoView = View;
});
<div class="yui3-g">
<div class="yui3-u-2-3">
<h2>Today's Users</h2>
<div data-view="UserListView" data-model="UserList"></div>
</div>
<div class="yui3-u-1-3">
<h2>Monthly Overview</h2>
<div data-view="OverviewView" data-model="StatList"></div>
</div>
</div>
<script type="text/javascript">
var admin = new Y.TDP.AutoView();
admin.render();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment