## Templating

# Fetch, filter and render a list of data using HTML. Great for creating blogs, shopping items, datatables, etc.

## Fetch

Fetching and rendering a list is done by applying fetch-collection to an element and nesting a template within

### Filter

Add attribute template_id and filter-name to one or more elements to filter the results

## Templating Attributes

- #### template_id string required

  Template identifier. This attribute should be define.

- #### fetch-collection string required

  Collection name to fetch data. It is required.

- #### fetch-name string optional

  Define the field name to fetch array

  If this value defined, it will fetch the special field's value

- #### fetch-limit string optional

  Fetch the item's count on page load or when updated. If attribute is empty or not used, total items will be fetch.

- #### fetch-type string optional

  Available value: loadmore | scroll | total.

- #### filter-name string optional

  Collections's field name for filter.

- #### filter-value string optional

  Collection's field value for filter. If filter-name defined, this attribute should defined too

- #### filter-value-type string optional

  string | number | object | array . Default value is string

- #### filter-operator string optional

  Define the filter operator.

  Operators: includes | $range | $eq | $ne | $lt | $lte | $gt | $gte | $in | $nin

- #### filter-logical-operator string optional

  Define the filter operator.

  Operators: and | or

- #### filter-case-sensitive boolean optional

  Define the filter operator.

  true | false defauts to false

- #### filter-search string optional

  define on input elemens. Will perform a search for the value across all names in the collection

- #### filter-sort-name string optional

  Field name to sorting.

- #### filter-sort-direction string optional

  Available value: asc | desc.

  Fetch order value on page load or when updated. If attribute is empty or not used Default's to asc.

- #### filter-sort-toggle string optional

  Available value: asc | desc.

  Fetch order value on page load or when updated. If attribute is empty or not used Default's to asc.

Previous Topic

Using CoCreateJS attributes on html elements

Next Topic

Applying logic and sharing data between pages