Skip to content

Latest commit

 

History

History
58 lines (41 loc) · 1.65 KB

polymer_manual__basic__templating.adoc

File metadata and controls

58 lines (41 loc) · 1.65 KB
Raw

Templating

Polymer provides convenient means for templating: a conditional template (dom-if) and a template repeater (dom-repeat).

The following example demonstrates these features. It’s a component named name-list, which allows a user to create a list of names. It provides an input where the user can enter some name and confirm it by pushing a confirm button. The confirmed name will be added to the list and displayed below.

To prevent a user from entering too many names there is a property maxNameLength. When a list size reaches some limit (3, by default) the input disappears.

Result

Source code

index.html
<html>
<head>
	<link rel="import" href="src/polymer-basic/templating/name-list.html">
	<script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
</head>
<body>
    <name-list></name-list>
</body>
</html>
src/polymer-basic/templating/name-list.html
link:../../../../source/polymer-build/src/polymer-basic/templating/name-list.html[role=include]

This example shows how to work with dom-if and dom-repeat templates.

What we have learned so far

  • dom-if template can be used when some content should be shown/hidden on some condition.

  • dom-repeat template can be used to display an array of elements.

  • The default values of object properties have to be specified with functions to avoid sharing a state between components.