Creating a data list

Creating a data list

Data lists act as a responsive View for a data store. They create a simple, but powerful DOM representation which allows easy CSS customization.

The only requirement is a CSS class named hidden, which sets display: none;.

An unordered list UL will be created in the target element (e.g. div, section, nav). This element will fire data list centric events, when the data list changes.

When the data store changes, due to data.del or data.set, the data list will redraw if the change is visible.

var app      = $.data({id: "app"}, null, {key: "name", events: false}),
    uri      = "http://api.yourdomain.com/users",
    obj      = $("#list"),
    template = "{{name}} ({{email}})",
    config, fn;

// Callback function for new data list item
fn = function (obj) {
	var key = obj.data("key"),
	    rec = app.data.get(key);

	…
});

// Setting config of data list
config = {
	callback : fn,
	order    : "name, email",
	pageSize : 10
}

// Creating the data list (renders after data is retrieved)
app.datalist = $.datalist(app.data, obj, template, config);

// Wiring the data store to an API
app.setUri(uri).then(function (recs) {
	// success handler
}, function (e) {
	// error handler
});