Class M.ListView
Extends
M.View.
M.ListView is the prototype of any list view. It is used to display static or dynamic
content as vertically aligned list items (M.ListItemView). A list view provides some
easy to use helper method, e.g. an out-of-the-box delete view for items.
Defined in: list.js.
Constructor Attributes | Constructor Name and Description |
---|---|
Field Attributes | Field Name and Description |
---|---|
If the list view is a counted list, this property can be used to customize the style
of the list item's counter.
|
|
If the list view is a divided list, this property can be used to customize the style
of the list's dividers.
|
|
This property can be used to customize the style of the list view's split view.
|
|
This property contains all available options for the edit mode.
|
|
Determines whether or not to display a search bar at the top of the list view.
|
|
States whether the list view is currently in edit mode or not.
|
|
Determines whether to display the the number of child items for each list item view.
|
|
Determines whether to display the list as a divided list or not.
|
|
Determines whether to display the list view 'inset' or at full width.
|
|
Defines if the ListView is rendered with prefixed numbering for each item.
|
|
The list view's items, respectively its child views.
|
|
This property contains the list view's template view, the blueprint for every child view.
|
|
An object containing target and action to be triggered if the search string changes.
|
|
Determines whether to remove all item if the list is updated or not.
|
|
The list view's search bar.
|
|
The type of this object.
|
|
If the hasSearchBar property is set to YES, this property determines whether to use the built-in
simple search filters or not.
|
- Fields borrowed from class M.View:
- childViews, contentBinding, cssClass, cssClassOnError, cssClassOnInit, cssStyle, hasFocus, html, id, isInline, isView, modelId, parentView, triggerActionOnChange, triggerActionOnEnter, triggerActionOnKeyUp, value
Method Attributes | Method Name and Description |
---|---|
addItem(item)
This method adds a new list item to the list view by simply appending its html representation
to the list view inside the DOM.
|
|
This method removes all of the list view's items by removing all of its content in the DOM.
|
|
setActiveListItem(listItemId)
This method activates a list item by applying the default 'isActive' css style to its
DOM representation.
|
|
toggleRemove(options)
This method activates the edit mode and forces the list view to re-render itself
and to display a remove button for every list view item.
|
- Methods borrowed from class M.View:
- addCssClass, attachToObservable, clearHtml, computeValue, contentDidChange, delegateValueUpdate, design, gotFocus, lostFocus, nl2br, removeCssClass, removeCssProperty, renderUpdate, secure, setCssProperty, setValueFromDOM, style, theme, themeChildViews
- Methods borrowed from class M.Object:
- bindToCaller, create, destroy, extend, get, include, set
Field Detail
{String}
cssClassForCounter
If the list view is a counted list, this property can be used to customize the style
of the list item's counter.
{String}
cssClassForDivider
If the list view is a divided list, this property can be used to customize the style
of the list's dividers.
{String}
cssClassForSplitView
This property can be used to customize the style of the list view's split view. For example
the toggleRemove() of a list view uses the built-in split view functionality.
{Object}
editOptions
This property contains all available options for the edit mode. For example the target and action
of the automatically rendered delete button can be specified using this property.
{Boolean}
hasSearchBar
Determines whether or not to display a search bar at the top of the list view.
{Boolean}
inEditMode
States whether the list view is currently in edit mode or not. This is mainly used by the
built-in toggleRemove() functionality.
{Boolean}
isCountedList
Determines whether to display the the number of child items for each list item view.
{Boolean}
isDividedList
Determines whether to display the list as a divided list or not.
{Boolean}
isInsetList
Determines whether to display the list view 'inset' or at full width.
{Boolean}
isNumberedList
Defines if the ListView is rendered with prefixed numbering for each item.
{Array}
items
The list view's items, respectively its child views.
{M.ListItemView}
listItemTemplateView
This property contains the list view's template view, the blueprint for every child view.
{Object}
onSearchStringDidChange
An object containing target and action to be triggered if the search string changes.
{Boolean}
removeItemsOnUpdate
Determines whether to remove all item if the list is updated or not.
{Object}
searchBar
The list view's search bar.
{String}
type
The type of this object.
{Boolean}
usesDefaultSearchBehaviour
If the hasSearchBar property is set to YES, this property determines whether to use the built-in
simple search filters or not. If set to YES, the list is simply filtered on the fly according
to the entered search string. Only list items matching the entered search string will be visible.
If a custom search behaviour is needed, this property must be set to NO.
Method Detail
addItem(item)
This method adds a new list item to the list view by simply appending its html representation
to the list view inside the DOM. This method is based on jQuery's append().
- Parameters:
- {String} item
- The html representation of a list item to be added.
removeAllItems()
This method removes all of the list view's items by removing all of its content in the DOM. This
method is based on jQuery's empty().
setActiveListItem(listItemId)
This method activates a list item by applying the default 'isActive' css style to its
DOM representation.
- Parameters:
- {String} listItemId
- The id of the list item to be set active.
toggleRemove(options)
This method activates the edit mode and forces the list view to re-render itself
and to display a remove button for every list view item.
- Parameters:
- {Object} options
- The options for the remove button.