ListView

ListView renders a container with list items inside

Example Usage

HTML

<div class='search-results'></div>

JavaScript

// Pull in the library
const UI = require('jibe-juice');

// Instantiate a component, pass the selector of the container to insert component into and the opts
const results = new UI.ListView('.search-results', {
  fetch: function(cb) {
    const results = [];
    // go do some stuff to get new results...
    cb(results);
  },
  listItemOpts: {
    attrs: {
      foo: 'bar',
      baz: 'foobar',
      class: 'testClass'
    }
  },

  results: [1, 2, 3, 4, 5] // initial results to show
});

// Subscribe to fire this function whenever a list item is selected
results.subscribe(function(selection) {
  console.log('list item selected', selection);
});

// Render the DOM for the ListView component
results.render();

params

Name	Type	Default	Description
el	string	undefined	A string of the selector for the element to put the component in
opts	object	{}	A catch all for various options. See the opts table below for options specific to this component.

opts

Name	Type	Default	Description
fetch	function	Utils.noop	A function to fetch and populate new results data
listItemOpts	object	{}	An object containing options specifically for each item in listView (See table below for full list of options)

opts.listItemOpts

Name	Type	Default	Description
attrs	object	undefined	A list of CSS attributes to put on each ListItem
disableClickHandlers	boolean	undefined	If true, disable the click handlers on the list items
renderItem	function	undefined	Determines how each listElement will be displayed in DOM
results	*[]	undefined	An array of results to prefill the component with data
stopPropagation	boolean	undefined	Prevents the click handler from bubbling the event upwards