{"_id":"574df6914910841900337264","project":"5730eb946b55e93400b32aae","user":"5730eaf719c1e00e006d215f","parentDoc":null,"category":{"_id":"5734b41b9c2cf82900b243ee","__v":0,"project":"5730eb946b55e93400b32aae","version":"5730eb946b55e93400b32ab1","sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-05-12T16:49:31.689Z","from_sync":false,"order":9999,"slug":"components","title":"Components"},"version":{"_id":"5730eb946b55e93400b32ab1","project":"5730eb946b55e93400b32aae","__v":4,"createdAt":"2016-05-09T19:57:08.646Z","releaseDate":"2016-05-09T19:57:08.646Z","categories":["5730eb946b55e93400b32ab2","5734b41b9c2cf82900b243ee","5734c6986d9a38200073dd32","5734cea86d9a38200073dd5a"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"0.3.25","version":"0.3.25"},"__v":3,"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-05-31T20:39:45.057Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":4,"body":"ListView renders a container with list items inside\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example Usage\"\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"<div class='search-results'></div>\",\n      \"language\": \"html\"\n    }\n  ]\n}\n[/block]\n\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"// Pull in the library\\nconst UI = require('jibe-juice');\\n\\n// Instantiate a component, pass the selector of the container to insert component into and the opts\\nconst results = new UI.ListView('.search-results', {\\n  fetch: function(cb) {\\n    const results = [];\\n    // go do some stuff to get new results...\\n    cb(results);\\n  },\\n  listItemOpts: {\\n    attrs: {\\n      foo: 'bar',\\n      baz: 'foobar',\\n      class: 'testClass'\\n    }\\n  },\\n\\n  results: [1, 2, 3, 4, 5] // initial results to show\\n});\\n\\n// Subscribe to fire this function whenever a list item is selected\\nresults.subscribe(function(selection) {\\n  console.log('list item selected', selection);\\n});\\n\\n// Render the DOM for the ListView component\\nresults.render();\",\n      \"language\": \"javascript\"\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"params\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"el\",\n    \"1-0\": \"opts\",\n    \"1-3\": \"A catch all for various options. See the opts table below for options specific to this component.\",\n    \"1-1\": \"object\",\n    \"1-2\": \"{}\",\n    \"0-1\": \"string\",\n    \"0-2\": \"undefined\",\n    \"0-3\": \"A string of the selector for the element to put the component in\"\n  },\n  \"cols\": 4,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"h-4\": \"Description\",\n    \"0-0\": \"fetch\",\n    \"0-2\": \"`Utils.noop`\",\n    \"0-1\": \"function\",\n    \"0-3\": \"A function to fetch and populate new results data\",\n    \"1-0\": \"listItemOpts\",\n    \"1-1\": \"object\",\n    \"1-2\": \"`{}`\",\n    \"1-3\": \"An object containing options specifically for each item in listView (See table below for full list of options)\"\n  },\n  \"cols\": 4,\n  \"rows\": 2\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"opts.listItemOpts\"\n}\n[/block]\n\n[block:parameters]\n{\n  \"data\": {\n    \"h-0\": \"Name\",\n    \"h-1\": \"Type\",\n    \"h-2\": \"Default\",\n    \"h-3\": \"Description\",\n    \"0-0\": \"attrs\",\n    \"0-1\": \"object\",\n    \"0-2\": \"`undefined`\",\n    \"0-3\": \"A list of CSS attributes to put on each ListItem\",\n    \"1-0\": \"disableClickHandlers\",\n    \"1-1\": \"boolean\",\n    \"1-2\": \"`undefined`\",\n    \"1-3\": \"If true, disable the click handlers on the list items\",\n    \"4-0\": \"stopPropagation\",\n    \"4-1\": \"boolean\",\n    \"4-2\": \"`undefined`\",\n    \"4-3\": \"Prevents the click handler from bubbling the event upwards\",\n    \"2-0\": \"renderItem\",\n    \"2-1\": \"function\",\n    \"2-3\": \"Determines how each listElement will be displayed in DOM\",\n    \"2-2\": \"`undefined`\",\n    \"3-0\": \"results\",\n    \"3-1\": \"`*[]`\",\n    \"3-2\": \"`undefined`\",\n    \"3-3\": \"An array of results to prefill the component with data\"\n  },\n  \"cols\": 4,\n  \"rows\": 5\n}\n[/block]","excerpt":"","slug":"listview","type":"basic","title":"ListView"}
ListView renders a container with list items inside [block:api-header] { "type": "basic", "title": "Example Usage" } [/block] [block:code] { "codes": [ { "code": "<div class='search-results'></div>", "language": "html" } ] } [/block] [block:code] { "codes": [ { "code": "// Pull in the library\nconst UI = require('jibe-juice');\n\n// Instantiate a component, pass the selector of the container to insert component into and the opts\nconst results = new UI.ListView('.search-results', {\n fetch: function(cb) {\n const results = [];\n // go do some stuff to get new results...\n cb(results);\n },\n listItemOpts: {\n attrs: {\n foo: 'bar',\n baz: 'foobar',\n class: 'testClass'\n }\n },\n\n results: [1, 2, 3, 4, 5] // initial results to show\n});\n\n// Subscribe to fire this function whenever a list item is selected\nresults.subscribe(function(selection) {\n console.log('list item selected', selection);\n});\n\n// Render the DOM for the ListView component\nresults.render();", "language": "javascript" } ] } [/block] [block:api-header] { "type": "basic", "title": "params" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "el", "1-0": "opts", "1-3": "A catch all for various options. See the opts table below for options specific to this component.", "1-1": "object", "1-2": "{}", "0-1": "string", "0-2": "undefined", "0-3": "A string of the selector for the element to put the component in" }, "cols": 4, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "opts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "h-4": "Description", "0-0": "fetch", "0-2": "`Utils.noop`", "0-1": "function", "0-3": "A function to fetch and populate new results data", "1-0": "listItemOpts", "1-1": "object", "1-2": "`{}`", "1-3": "An object containing options specifically for each item in listView (See table below for full list of options)" }, "cols": 4, "rows": 2 } [/block] [block:api-header] { "type": "basic", "title": "opts.listItemOpts" } [/block] [block:parameters] { "data": { "h-0": "Name", "h-1": "Type", "h-2": "Default", "h-3": "Description", "0-0": "attrs", "0-1": "object", "0-2": "`undefined`", "0-3": "A list of CSS attributes to put on each ListItem", "1-0": "disableClickHandlers", "1-1": "boolean", "1-2": "`undefined`", "1-3": "If true, disable the click handlers on the list items", "4-0": "stopPropagation", "4-1": "boolean", "4-2": "`undefined`", "4-3": "Prevents the click handler from bubbling the event upwards", "2-0": "renderItem", "2-1": "function", "2-3": "Determines how each listElement will be displayed in DOM", "2-2": "`undefined`", "3-0": "results", "3-1": "`*[]`", "3-2": "`undefined`", "3-3": "An array of results to prefill the component with data" }, "cols": 4, "rows": 5 } [/block]