Repeater repeater.js

Data viewer with paging, sorting, and searching. Must use at least one extension to display items. Fuel UX bundles a list view extension and thumbnail view extension, but you can build your own. The following example uses the list and thumbnail extensions.

Usage

Because of its reliance upon a dataSource, you must initialize a repeater() via JavaScript:

{% highlight js %} dataSource = function(options, callback){ //... }; $('#myRepeater').repeater({dataSource: dataSource}); {% endhighlight %}

Markup

Use the following markup to setup the repeater:

Optional data attributes

The repeater must be initialized via JavaScript, however it also accepts some optional data-attributes.

data-staticheight="true"

enables staticHeight on initialization.

Options

Pass options via JavaScript upon initialization.

Methods

.repeater('clear');

Clears the repeater of current data. Accepts an optional options object. {% highlight js %}$('#myRepeater').repeater('clear');{% endhighlight %} {% highlight js %}$('#myRepeater').repeater('clear', {preserve: true});{% endhighlight %}

Attribute	type	description
clearInfinite	boolean	optional -- if true, preserve must also be set to true to have an effect. If infinite scrolling is enabled, setting to true will clear all non data-preserved elements. Defaults to false.
preserve	boolean	optional If true, only items that don't have the data-preserve attribute will be removed. Otherwise, all items will be removed. Defaults to false.

.repeater('destroy')

Removes all functionality, jQuery data, and the markup from the DOM. Returns string of control markup.

.repeater('infiniteScrolling');

Enables or disabled infinite scrolling within the repeater. Used primarily by view extensions. Accepts an optional options object. {% highlight js %}$('#myRepeater').repeater('infiniteScrolling');{% endhighlight %} {% highlight js %}$('#myRepeater').repeater('infinitescrolling', true, {hybrid: true, percentage: 60});{% endhighlight %}

Argument	type	description
enable	boolean	If set to true, this function will enable infinite scrolling. Defaults to false.
options	object	Optional. Specifies the desired infinite scrolling settings. View the infinite scroll documentation for more details on available features. Your code will ignore the dataSource option on this object in favor of the dataSource on the repeater.

.repeater('render');

Calls the dataSource and renders the repeater data. Accepts an optional options object. {% highlight js %}$('#myRepeater').repeater('render');{% endhighlight %} {% highlight js %}$('#myRepeater').repeater('render', {'changeView': 'widescreen', 'preserve': true});{% endhighlight %}

Attribute	type	description
changeView	string	If set to a string value, this attribute will change the current repeater view to be rendered. Defaults to undefined.
clearInfinite	boolean	Passed to the clear method - see above for description.
pageIncrement	number or null	Use a number value to determine the amount by which the current page will increment or decrement. If null the current page will reset to 0.
preserve	boolean	Passed to the clear method - see above for description.

.repeater('resize');

Resizes the repeater based on staticHeight presence and value

Data Source

Call the dataSource function prior to rendering data for the current view. Receives an options object and callback function as arguments. The options object provides context for which data should return. Please review the dataSourceOptions option if the dataSource needs to be manipulated (such as for a custom render, to search, to sort, or to filter). Use the callback to continue onward with rendering.

The options object can vary in content depending on the view extension used. Many objects share these common attributes in options object format:

The dataSource's callback function should run after gathering the desired data for rendering. This function requires the code to pass a data object as an argument. Contents of the object will vary depending on the view extension used. The attributes below include common expected attributes:

The default values are { count: 0, end: 0, items: [], page: 0, pages: 1, start: 0 }.

Events

All repeater events are fired on the .repeater classed element.

{% highlight js %} $('#myRepeater').on('resized.fu.repeater', function () { // do something… }); {% endhighlight %}

Fuel UX Dependencies

• Combobox
• Infinite Scroll (optional)
• Search
• Selectlist

Repeater Extensions

• list view extension (repeater-list.js)
• thumbnail view extension (repeater-thumbnail.js)

The repeater uses a view framework that allows for extensions to represent data in different ways. By default, Fuel UX comes with two repeater view extensions (list and thumbnail). Each extension provides additional options and requires different return data from the dataSource to render appropriately. For information on using extensions, visit the extensions page. You can also learn how to write your own repeater extension.

Examples

Data viewer with paging, sorting, and searching using list and thumbnail extensions. Can be extended further for various other renderings.

Live examples:

• Codepen
• JSFiddle

Further Reading

• More thorough example (js code)
• Examples using both a static datasource and an API
• Tutorial on using the repeater