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 News 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":"behavior","desc":"\nThe `Polymer.Templatizer` behavior adds methods to generate instances of\ntemplates that are each managed by an anonymous `Polymer.Base` instance.\n\nExample:\n\n // Get a template from somewhere, e.g. light DOM\n var template = Polymer.dom(this).querySelector('template');\n // Prepare the template\n this.templatize(template);\n // Instance the template with an initial data model\n var instance = this.stamp({myProp: 'initial'});\n // Insert the instance's DOM somewhere, e.g. light DOM\n Polymer.dom(this).appendChild(instance.root);\n // Changing a property on the instance will propagate to bindings\n // in the template\n instance.myProp = 'new value';\n\nUsers of `Templatizer` may need to implement the following abstract\nAPI's to determine how properties and paths from the host should be\nforwarded into to instances:\n\n _forwardParentProp: function(prop, value)\n _forwardParentPath: function(path, value)\n\nLikewise, users may implement these additional abstract API's to determine\nhow instance-specific properties that change on the instance should be\nforwarded out to the host, if necessary.\n\n _forwardInstanceProp: function(inst, prop, value)\n _forwardInstancePath: function(inst, path, value)\n\nIn order to determine which properties are instance-specific and require\ncustom forwarding via `_forwardInstanceProp`/`_forwardInstancePath`,\ndefine an `_instanceProps` map containing keys for each instance prop,\nfor example:\n\n _instanceProps: {\n item: true,\n index: true\n }\n\nAny properties used in the template that are not defined in _instanceProp\nwill be forwarded out to the host automatically.\n\nUsers should also implement the following abstract function to show or\nhide any DOM generated using `stamp`:\n\n _showHideChildren: function(shouldHide)\n\n","events":[],"jsdoc":{"description":"\nThe `Polymer.Templatizer` behavior adds methods to generate instances of\ntemplates that are each managed by an anonymous `Polymer.Base` instance.\n\nExample:\n\n // Get a template from somewhere, e.g. light DOM\n var template = Polymer.dom(this).querySelector('template');\n // Prepare the template\n this.templatize(template);\n // Instance the template with an initial data model\n var instance = this.stamp({myProp: 'initial'});\n // Insert the instance's DOM somewhere, e.g. light DOM\n Polymer.dom(this).appendChild(instance.root);\n // Changing a property on the instance will propagate to bindings\n // in the template\n instance.myProp = 'new value';\n\nUsers of `Templatizer` may need to implement the following abstract\nAPI's to determine how properties and paths from the host should be\nforwarded into to instances:\n\n _forwardParentProp: function(prop, value)\n _forwardParentPath: function(path, value)\n\nLikewise, users may implement these additional abstract API's to determine\nhow instance-specific properties that change on the instance should be\nforwarded out to the host, if necessary.\n\n _forwardInstanceProp: function(inst, prop, value)\n _forwardInstancePath: function(inst, path, value)\n\nIn order to determine which properties are instance-specific and require\ncustom forwarding via `_forwardInstanceProp`/`_forwardInstancePath`,\ndefine an `_instanceProps` map containing keys for each instance prop,\nfor example:\n\n _instanceProps: {\n item: true,\n index: true\n }\n\nAny properties used in the template that are not defined in _instanceProp\nwill be forwarded out to the host automatically.\n\nUsers should also implement the following abstract function to show or\nhide any DOM generated using `stamp`:\n\n _showHideChildren: function(shouldHide)\n\n","tags":[{"tag":"polymerBehavior","type":null,"name":null,"description":null}],"orig":"*\n * The `Polymer.Templatizer` behavior adds methods to generate instances of\n * templates that are each managed by an anonymous `Polymer.Base` instance.\n *\n * Example:\n *\n * // Get a template from somewhere, e.g. light DOM\n * var template = Polymer.dom(this).querySelector('template');\n * // Prepare the template\n * this.templatize(template);\n * // Instance the template with an initial data model\n * var instance = this.stamp({myProp: 'initial'});\n * // Insert the instance's DOM somewhere, e.g. light DOM\n * Polymer.dom(this).appendChild(instance.root);\n * // Changing a property on the instance will propagate to bindings\n * // in the template\n * instance.myProp = 'new value';\n *\n * Users of `Templatizer` may need to implement the following abstract\n * API's to determine how properties and paths from the host should be\n * forwarded into to instances:\n *\n * _forwardParentProp: function(prop, value)\n * _forwardParentPath: function(path, value)\n *\n * Likewise, users may implement these additional abstract API's to determine\n * how instance-specific properties that change on the instance should be\n * forwarded out to the host, if necessary.\n *\n * _forwardInstanceProp: function(inst, prop, value)\n * _forwardInstancePath: function(inst, path, value)\n *\n * In order to determine which properties are instance-specific and require\n * custom forwarding via `_forwardInstanceProp`/`_forwardInstancePath`,\n * define an `_instanceProps` map containing keys for each instance prop,\n * for example:\n *\n * _instanceProps: {\n * item: true,\n * index: true\n * }\n *\n * Any properties used in the template that are not defined in _instanceProp\n * will be forwarded out to the host automatically.\n *\n * Users should also implement the following abstract function to show or\n * hide any DOM generated using `stamp`:\n *\n * _showHideChildren: function(shouldHide)\n *\n * @polymerBehavior\n "},"demos":[],"symbol":"Polymer.Templatizer","is":"Polymer.Templatizer","properties":[{"name":"modelForElement","type":"Function","desc":"\nReturns the template \"model\" associated with a given element, which\nserves as the binding scope for the template instance the element is\ncontained in. A template model is an instance of `Polymer.Base`, and\nshould be used to manipulate data associated with this template instance.\n\nExample:\n\n var model = modelForElement(el);\n if (model.index < 10) {\n model.set('item.checked', true);\n }\n\n","params":[{"name":"el","type":"HTMLElement","desc":"Element for which to return a template model."}],"jsdoc":{"description":"\nReturns the template \"model\" associated with a given element, which\nserves as the binding scope for the template instance the element is\ncontained in. A template model is an instance of `Polymer.Base`, and\nshould be used to manipulate data associated with this template instance.\n\nExample:\n\n var model = modelForElement(el);\n if (model.index < 10) {\n model.set('item.checked', true);\n }\n\n","tags":[{"tag":"method","type":null,"name":"modelForElement","description":null},{"tag":"param","type":"HTMLElement","name":"el","description":"Element for which to return a template model."},{"tag":"return","type":"Object.<Polymer.Base>","description":"Model representing the binding scope for\n the element."}],"orig":"*\n * Returns the template \"model\" associated with a given element, which\n * serves as the binding scope for the template instance the element is\n * contained in. A template model is an instance of `Polymer.Base`, and\n * should be used to manipulate data associated with this template instance.\n *\n * Example:\n *\n * var model = modelForElement(el);\n * if (model.index < 10) {\n * model.set('item.checked', true);\n * }\n *\n * @method modelForElement\n * @param {HTMLElement} el Element for which to return a template model.\n * @return {Object<Polymer.Base>} Model representing the binding scope for\n * the element.\n "},"function":true,"return":{"type":"Object.<Polymer.Base>","desc":"Model representing the binding scope for\n the element."}},{"name":"stamp","type":"Function","desc":"\nCreates an instance of the template previously processed via\na call to `templatize`.\n\nThe object returned is an anonymous subclass of Polymer.Base that\nhas accessors generated to manage data in the template. The DOM for\nthe instance is contained in a DocumentFragment called `root` on\nthe instance returned and must be manually inserted into the DOM\nby the user.\n\nNote that a call to `templatize` must be called once before using\n`stamp`.\n\n","params":[{"name":"model","type":"Object=","desc":"An object containing key/values to serve as the\n initial data configuration for the instance. Note that properties\n from the host used in the template are automatically copied into\n the model."}],"jsdoc":{"description":"\nCreates an instance of the template previously processed via\na call to `templatize`.\n\nThe object returned is an anonymous subclass of Polymer.Base that\nhas accessors generated to manage data in the template. The DOM for\nthe instance is contained in a DocumentFragment called `root` on\nthe instance returned and must be manually inserted into the DOM\nby the user.\n\nNote that a call to `templatize` must be called once before using\n`stamp`.\n\n","tags":[{"tag":"method","type":null,"name":"stamp","description":null},{"tag":"param","type":"Object=","name":"model","description":"An object containing key/values to serve as the\n initial data configuration for the instance. Note that properties\n from the host used in the template are automatically copied into\n the model."},{"tag":"return","type":"Polymer.Base","description":"The Polymer.Base instance to manage the template\n instance."}],"orig":"*\n * Creates an instance of the template previously processed via\n * a call to `templatize`.\n *\n * The object returned is an anonymous subclass of Polymer.Base that\n * has accessors generated to manage data in the template. The DOM for\n * the instance is contained in a DocumentFragment called `root` on\n * the instance returned and must be manually inserted into the DOM\n * by the user.\n *\n * Note that a call to `templatize` must be called once before using\n * `stamp`.\n *\n * @method stamp\n * @param {Object=} model An object containing key/values to serve as the\n * initial data configuration for the instance. Note that properties\n * from the host used in the template are automatically copied into\n * the model.\n * @return {Polymer.Base} The Polymer.Base instance to manage the template\n * instance.\n "},"function":true,"return":{"type":"Polymer.Base","desc":"The Polymer.Base instance to manage the template\n instance."}},{"name":"templatize","type":"Function","desc":"\nPrepares a template containing Polymer bindings by generating\na constructor for an anonymous `Polymer.Base` subclass to serve as the\nbinding context for the provided template.\n\nUse `this.stamp` to create instances of the template context containing\na `root` fragment that may be stamped into the DOM.\n\n","params":[{"name":"template","type":"HTMLTemplateElement","desc":"The template to process."}],"jsdoc":{"description":"\nPrepares a template containing Polymer bindings by generating\na constructor for an anonymous `Polymer.Base` subclass to serve as the\nbinding context for the provided template.\n\nUse `this.stamp` to create instances of the template context containing\na `root` fragment that may be stamped into the DOM.\n\n","tags":[{"tag":"method","type":null,"name":"templatize","description":null},{"tag":"param","type":"HTMLTemplateElement","name":"template","description":"The template to process."}],"orig":"*\n * Prepares a template containing Polymer bindings by generating\n * a constructor for an anonymous `Polymer.Base` subclass to serve as the\n * binding context for the provided template.\n *\n * Use `this.stamp` to create instances of the template context containing\n * a `root` fragment that may be stamped into the DOM.\n *\n * @method templatize\n * @param {HTMLTemplateElement} template The template to process.\n "},"function":true},{"name":"__hideTemplateChildren__","type":"Object","published":true,"observer":"_showHideChildren","observerNode":{"type":"Literal","start":2172,"end":2191,"loc":{"start":{"line":59,"column":18},"end":{"line":59,"column":37}},"range":[2172,2191],"value":"_showHideChildren","raw":"'_showHideChildren'"},"private":true},{"name":"__setPropertyImpl","type":"Function","params":[{"name":"property"},{"name":"value"},{"name":"fromAbove"},{"name":"node"}],"private":true,"function":true},{"name":"_constructorImpl","type":"Function","params":[{"name":"model"},{"name":"host"}],"private":true,"function":true},{"name":"_createForwardPropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"name":"_createHostPropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"name":"_createInstancePropEffector","type":"Function","params":[{"name":"prop"}],"private":true,"function":true},{"name":"_customPrepAnnotations","type":"Function","params":[{"name":"archetype"},{"name":"template"}],"private":true,"function":true},{"name":"_customPrepEffects","type":"Function","params":[{"name":"archetype"}],"private":true,"function":true},{"name":"_debounceTemplate","type":"Function","params":[{"name":"fn"}],"private":true,"function":true},{"name":"_extendTemplate","type":"Function","desc":" values (_propertySetter back on instance once accessor is installed)","params":[{"name":"template"},{"name":"proto"}],"jsdoc":{"description":" values (_propertySetter back on instance once accessor is installed)","tags":[],"orig":" values (_propertySetter back on instance once accessor is installed)"},"private":true,"function":true},{"name":"_flushTemplates","type":"Function","params":[],"private":true,"function":true},{"name":"_forwardInstancePath","type":"Function","params":[{"name":"inst"},{"name":"path"},{"name":"value"}],"private":true,"function":true},{"name":"_forwardInstanceProp","type":"Function","params":[{"name":"inst"},{"name":"prop"},{"name":"value"}],"private":true,"function":true},{"name":"_getRootDataHost","type":"Function","params":[],"private":true,"function":true},{"name":"_instanceProps","type":"Member","desc":" Extension point for overrides","jsdoc":{"description":" Extension point for overrides","tags":[],"orig":" Extension point for overrides"},"private":true},{"name":"_listenImpl","type":"Function","desc":" Decorate events with model (template instance)","params":[{"name":"node"},{"name":"eventName"},{"name":"methodName"}],"jsdoc":{"description":" Decorate events with model (template instance)","tags":[],"orig":" Decorate events with model (template instance)"},"private":true,"function":true},{"name":"_notifyPathUpImpl","type":"Function","desc":" eslint-enable no-unused-vars ","params":[{"name":"path"},{"name":"value"}],"jsdoc":{"description":" eslint-enable no-unused-vars ","tags":[],"orig":" eslint-enable no-unused-vars "},"private":true,"function":true},{"name":"_parentPropPrefix","type":"string","private":true},{"name":"_pathEffectorImpl","type":"Function","desc":" Overrides Base notify-path module","params":[{"name":"path"},{"name":"value"},{"name":"fromAbove"}],"jsdoc":{"description":" Overrides Base notify-path module","tags":[],"orig":" Overrides Base notify-path module"},"private":true,"function":true},{"name":"_prepParentProperties","type":"Function","desc":" on the archetype and copied to instances.","params":[{"name":"archetype"},{"name":"template"}],"jsdoc":{"description":" on the archetype and copied to instances.","tags":[],"orig":" on the archetype and copied to instances."},"private":true,"function":true},{"name":"_scopeElementClassImpl","type":"Function","params":[{"name":"node"},{"name":"value"}],"private":true,"function":true},{"name":"_showHideChildren","type":"Function","desc":" eslint-disable no-unused-vars ","params":[{"name":"hidden"}],"jsdoc":{"description":" eslint-disable no-unused-vars ","tags":[],"orig":" eslint-disable no-unused-vars "},"private":true,"function":true},{"name":"_showHideChildrenImpl","type":"Function","params":[{"name":"hide"}],"private":true,"function":true}],"observers":[],"contentHref":"temp/src/lib/template/templatizer.html"}