Class name

E.controls.dataview (0.1.0)

Methods

Method Parameters Returns Description Example
build string Build string of component markup build()
append jquery selector boolean Build and append string to DOM append('#mydiv')
columns positive integer this Set number of columns (defaults to 4) columns(6)
template string this Specify mustache template to render each item
callback function this Set callback method to use to render each item callback( function(d) { ... } )
items array this Set entire dataset for the view items( [ [], ..., [] ] )
item array this Append individual row item( [ ... ] )
pagesize positive integer this Number of items per page (default is 10) pagesize(6)

Note

For the purposes of this documentation, we are using a remote data source of generated random data.
Sample data
[
	{
		"id": 1,
		"gender": "Male",
		"first_name": "Keith",
		"last_name": "Kennedy",
		"color": "Red",
		"country": "CN",
		"joined": "2015-05-22"
	}
]

Usage with callback

Define callback method

function render_item( d ) {
	var x = $E('panel').header( d.first_name + ' ' + d.last_name );
	x.body( '<p style="color:' + d.color.toLowerCase() + '">' + d.gender + '</p>' );
	x.body( '<p>' + d.joined + '</p>' );
	return x.build();
}

Load data and create control

$.getJSON( '/javascripts/demodata.js', function( d ) {
	// make sure data is present
	if( d ) {
		// create instance of control
		var o = $E('dataview');
		// set page size
		o.pagesize(12);
		// set column count
		o.columns(3);
		// set callback
		o.callback( render_item );
		// set data
		o.items( d );
		// append to DOM
		o.append('#mydiv');
	}
} );

Usage with mustache template

Define mustache template string

var render_item = '<div class="panel panel-default"><div class="panel-heading"><h3 class="panel-title">{{first_name}} {{last_name}}</h3></div><div class="panel-body"><p style="color:{{color}};">{{gender}}</p><p>{{joined}}</p></div></div>';

Load data and create control

$.getJSON( 'demodata.js', function( d ) {
	// make sure data is present
	if( d ) {
		// create instance of control
		var o = $E('dataview');
		// set page size
		o.pagesize(12);
		// set column count
		o.columns(3);
		// set template
		o.template( render_item );
		// set data
		o.items( d );
		// append to DOM
		o.append('#mydiv');
	}
} );
Last modified: 2016-02-19