Home Start Get started Build an element 1. Get set up 2. Add local DOM 3. Data binding & properties 4. React to input 5. Theming with custom properties Build an app 1. Get set up 2. Create a new page 3. Add some elements 4. Deploy Polymer Feature overview Quick tour Define elements Register an element Declare properties Instance methods Behaviors Local DOM & styling Local DOM Styling Events Handle and fire events Gesture events Data system Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements Tools Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services What's new Release notes 1.0 Migration guide About Polymer 1.0 Resources Community Browser compatibility API Reference Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings 2.0 Preview About Polymer 2.0 Upgrade guide App Toolbox What's in the box? Using the Toolbox App templates Responsive app layout Routing Localization App storage Service worker Serve your app Case study Shop Elements News Feature overview Quick tour
Define elements
Register an element Declare properties Instance methods Behaviors
Local DOM & styling
Local DOM Styling
Events
Handle and fire events Gesture events
Data system
Data system concepts Work with object and array data Observers and computed properties Data binding Helper elements
Tools
Tools overview Polymer CLI Document your elements Test your elements Optimize for production Publish an element Advanced tools Services
What's new
Release notes 1.0 Migration guide About Polymer 1.0
Resources
Community Browser compatibility
API Reference
Polymer.Base array-selector custom-style dom-bind dom-if dom-repeat dom-template Polymer.Templatizer Global settings
{"type":"element","desc":"\nKeeping structured data in sync requires that Polymer understand the path\nassociations of data being bound. The `array-selector` element ensures path\nlinkage when selecting specific items from an array (either single or multiple).\nThe `items` property accepts an array of user data, and via the `select(item)`\nand `deselect(item)` API, updates the `selected` property which may be bound to\nother parts of the application, and any changes to sub-fields of `selected`\nitem(s) will be kept in sync with items in the `items` array. When `multi`\nis false, `selected` is a property representing the last selected item. When\n`multi` is true, `selected` is an array of multiply selected items.\n\n```html\n<dom-module id=\"employee-list\">\n\n <template>\n\n <div> Employee list: </div>\n <template is=\"dom-repeat\" id=\"employeeList\" items=\"{{employees}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n <button on-click=\"toggleSelection\">Select</button>\n </template>\n\n <array-selector id=\"selector\" items=\"{{employees}}\" selected=\"{{selected}}\" multi toggle></array-selector>\n\n <div> Selected employees: </div>\n <template is=\"dom-repeat\" items=\"{{selected}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n <script>\n Polymer({\n is: 'employee-list',\n ready: function() {\n this.employees = [\n {first: 'Bob', last: 'Smith'},\n {first: 'Sally', last: 'Johnson'},\n ...\n ];\n },\n toggleSelection: function(e) {\n var item = this.$.employeeList.itemForElement(e.target);\n this.$.selector.select(item);\n }\n });\n </script>\n\n</dom-module>\n```\n","events":[],"properties":[{"name":"clearSelection","type":"Function","desc":"\nClears the selection state.\n\n","params":[],"jsdoc":{"description":"\nClears the selection state.\n\n","tags":[{"tag":"method","type":null,"name":"clearSelection","description":null}],"orig":"*\n * Clears the selection state.\n *\n * @method clearSelection\n "},"function":true},{"name":"deselect","type":"Function","desc":"\nDeselects the given item if it is already selected.\n\n","params":[{"name":"item","type":"*","desc":"Item from `items` array to deselect"}],"jsdoc":{"description":"\nDeselects the given item if it is already selected.\n\n","tags":[{"tag":"method","type":null,"name":"isSelected","description":null},{"tag":"param","type":"*","name":"item","description":"Item from `items` array to deselect"}],"orig":"*\n * Deselects the given item if it is already selected.\n *\n * @method isSelected\n * @param {*} item Item from `items` array to deselect\n "},"function":true},{"name":"isSelected","type":"Function","desc":"\nReturns whether the item is currently selected.\n\n","params":[{"name":"item","type":"*","desc":"Item from `items` array to test"}],"jsdoc":{"description":"\nReturns whether the item is currently selected.\n\n","tags":[{"tag":"method","type":null,"name":"isSelected","description":null},{"tag":"param","type":"*","name":"item","description":"Item from `items` array to test"},{"tag":"return","type":"boolean","description":"Whether the item is selected"}],"orig":"*\n * Returns whether the item is currently selected.\n *\n * @method isSelected\n * @param {*} item Item from `items` array to test\n * @return {boolean} Whether the item is selected\n "},"function":true,"return":{"type":"boolean","desc":"Whether the item is selected"}},{"name":"items","type":"Array","desc":"\nAn array containing items from which selection will be made.\n ","published":true,"observer":"clearSelection","observerNode":{"type":"Literal","start":225,"end":241,"loc":{"start":{"line":14,"column":18},"end":{"line":14,"column":34}},"range":[225,241],"value":"clearSelection","raw":"'clearSelection'"},"jsdoc":{"description":"\nAn array containing items from which selection will be made.\n ","tags":[],"orig":"*\n * An array containing items from which selection will be made.\n "}},{"name":"multi","type":"Boolean","desc":"\nWhen `true`, multiple items may be selected at once (in this case,\n`selected` is an array of currently selected items). When `false`,\nonly one item may be selected at a time.\n ","published":true,"default":false,"observer":"clearSelection","observerNode":{"type":"Literal","start":553,"end":569,"loc":{"start":{"line":25,"column":18},"end":{"line":25,"column":34}},"range":[553,569],"value":"clearSelection","raw":"'clearSelection'"},"jsdoc":{"description":"\nWhen `true`, multiple items may be selected at once (in this case,\n`selected` is an array of currently selected items). When `false`,\nonly one item may be selected at a time.\n ","tags":[],"orig":"*\n * When `true`, multiple items may be selected at once (in this case,\n * `selected` is an array of currently selected items). When `false`,\n * only one item may be selected at a time.\n "}},{"name":"select","type":"Function","desc":"\nSelects the given item. When `toggle` is true, this will automatically\ndeselect the item if already selected.\n\n","params":[{"name":"item","type":"*","desc":"Item from `items` array to select"}],"jsdoc":{"description":"\nSelects the given item. When `toggle` is true, this will automatically\ndeselect the item if already selected.\n\n","tags":[{"tag":"method","type":null,"name":"isSelected","description":null},{"tag":"param","type":"*","name":"item","description":"Item from `items` array to select"}],"orig":"*\n * Selects the given item. When `toggle` is true, this will automatically\n * deselect the item if already selected.\n *\n * @method isSelected\n * @param {*} item Item from `items` array to select\n "},"function":true},{"name":"selected","type":"Object","desc":"\nWhen `multi` is true, this is an array that contains any selected.\nWhen `multi` is false, this is the currently selected item, or `null`\nif no item is selected.\n ","published":true,"notify":true,"jsdoc":{"description":"\nWhen `multi` is true, this is an array that contains any selected.\nWhen `multi` is false, this is the currently selected item, or `null`\nif no item is selected.\n ","tags":[],"orig":"*\n * When `multi` is true, this is an array that contains any selected.\n * When `multi` is false, this is the currently selected item, or `null`\n * if no item is selected.\n "}},{"name":"selectedItem","type":"Object","desc":"\nWhen `multi` is false, this is the currently selected item, or `null`\nif no item is selected.\n ","published":true,"notify":true,"jsdoc":{"description":"\nWhen `multi` is false, this is the currently selected item, or `null`\nif no item is selected.\n ","tags":[],"orig":"*\n * When `multi` is false, this is the currently selected item, or `null`\n * if no item is selected.\n "}},{"name":"toggle","type":"Boolean","desc":"\nWhen `true`, calling `select` on an item that is already selected\nwill deselect the item.\n ","published":true,"default":false,"jsdoc":{"description":"\nWhen `true`, calling `select` on an item that is already selected\nwill deselect the item.\n ","tags":[],"orig":"*\n * When `true`, calling `select` on an item that is already selected\n * will deselect the item.\n "}},{"name":"_template","type":"object","private":true}],"behaviors":[],"observers":[],"is":"array-selector","contentHref":"temp/src/lib/template/array-selector.html","jsdoc":{"description":"\nKeeping structured data in sync requires that Polymer understand the path\nassociations of data being bound. The `array-selector` element ensures path\nlinkage when selecting specific items from an array (either single or multiple).\nThe `items` property accepts an array of user data, and via the `select(item)`\nand `deselect(item)` API, updates the `selected` property which may be bound to\nother parts of the application, and any changes to sub-fields of `selected`\nitem(s) will be kept in sync with items in the `items` array. When `multi`\nis false, `selected` is a property representing the last selected item. When\n`multi` is true, `selected` is an array of multiply selected items.\n\n```html\n<dom-module id=\"employee-list\">\n\n <template>\n\n <div> Employee list: </div>\n <template is=\"dom-repeat\" id=\"employeeList\" items=\"{{employees}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n <button on-click=\"toggleSelection\">Select</button>\n </template>\n\n <array-selector id=\"selector\" items=\"{{employees}}\" selected=\"{{selected}}\" multi toggle></array-selector>\n\n <div> Selected employees: </div>\n <template is=\"dom-repeat\" items=\"{{selected}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n <script>\n Polymer({\n is: 'employee-list',\n ready: function() {\n this.employees = [\n {first: 'Bob', last: 'Smith'},\n {first: 'Sally', last: 'Johnson'},\n ...\n ];\n },\n toggleSelection: function(e) {\n var item = this.$.employeeList.itemForElement(e.target);\n this.$.selector.select(item);\n }\n });\n </script>\n\n</dom-module>\n```\n","tags":[],"orig":"\nKeeping structured data in sync requires that Polymer understand the path\nassociations of data being bound. The `array-selector` element ensures path\nlinkage when selecting specific items from an array (either single or multiple).\nThe `items` property accepts an array of user data, and via the `select(item)`\nand `deselect(item)` API, updates the `selected` property which may be bound to\nother parts of the application, and any changes to sub-fields of `selected`\nitem(s) will be kept in sync with items in the `items` array. When `multi`\nis false, `selected` is a property representing the last selected item. When\n`multi` is true, `selected` is an array of multiply selected items.\n\n```html\n<dom-module id=\"employee-list\">\n\n <template>\n\n <div> Employee list: </div>\n <template is=\"dom-repeat\" id=\"employeeList\" items=\"{{employees}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n <button on-click=\"toggleSelection\">Select</button>\n </template>\n\n <array-selector id=\"selector\" items=\"{{employees}}\" selected=\"{{selected}}\" multi toggle></array-selector>\n\n <div> Selected employees: </div>\n <template is=\"dom-repeat\" items=\"{{selected}}\">\n <div>First name: <span>{{item.first}}</span></div>\n <div>Last name: <span>{{item.last}}</span></div>\n </template>\n\n </template>\n\n <script>\n Polymer({\n is: 'employee-list',\n ready: function() {\n this.employees = [\n {first: 'Bob', last: 'Smith'},\n {first: 'Sally', last: 'Johnson'},\n ...\n ];\n },\n toggleSelection: function(e) {\n var item = this.$.employeeList.itemForElement(e.target);\n this.$.selector.select(item);\n }\n });\n </script>\n\n</dom-module>\n```\n"},"demos":[]}