Awesome

list-render

Basic list view that use chemzqm/model and chemzqm/reactive-lite for high level component use,(eg: mobile-list, exgrid),😀

This component does not contain any event or loading method, but limited for dom operation.

Usage

var List =require('list-render')
var list = new List(template, parentNode, {
  limit: 10,
  delegate: {}, // for reactive
  bindings: {},// for reactive
  filters: {} // for reactive
})
var users = [{first: 'tobi', last: 'bear'}]
list.setData(users)

API

ListRender(template, parentNode, [option])

• template repeat element or (template string) for rendering
• parentNode element for list element to append to
• option optional config
• option.delegate delegate object for reactive
• option.bindings bindings object for reactive
• option.filters filters object for reactive
• option.model model class used for generate model
• option.limit the limit number for render when setData() (default Infinite)
• option.perpage used for paging should >= option.limit
• option.empty String or Element rendered in parentNode when internal data list is empty

.setData(array)

Set internal data array, and render them limit by option.limit

.more(max)

Render more internal data limit by max, return false if no more data to render

.react(attrs)

React model change with attrs, attrs must contain primaryKey.

.appendData(array)

Append more data and render them, no refresh

.prependData(array)

Append more data and render them, no refresh

.renderRange(start, [end])

Empty the exist list, and render the specific range of internal data array (no option.limit restrict, end is exclude)

.filterData(field, val | function)

Filter the with field and val (or function used for array.filter), and render them limit by option.limit When val is false, render all with limit by option.limit return filter array length

.sortData(field, direction, [method])

Sort the data with field direction ( 1 or -1 for ascend and descend) and method (string or number, or a sort function for javascript array), if no method, it guess the method by field value, render them limit by option.limit

.findModel(el)

Find a specific model instance related by element, useful for event delegate

.remove()

Remove the list elements, unbind all reactives and models created inside.

.select(n)

Render page n, expect perpage option specified.

model.remove()

Each created model would have remove() method, which remove associate reactive (including remove node, unbind change events). If remove exist on model, this function would append to origin remove and replace it. If exist remove method return promise(eg: ajax request), this function would not be called when rejected or resolved as false.

onchange(isRemove)

Interface that called when dom change, isRemove is true when called after model remove