Skip to content

Commit

Permalink
Updated to address comments.
Browse files Browse the repository at this point in the history
  • Loading branch information
Arthur Evans committed Jun 5, 2014
1 parent 81ad579 commit 80d2105
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 12 deletions.
17 changes: 11 additions & 6 deletions docs/polymer/databinding-advanced.md
Original file line number Diff line number Diff line change
Expand Up @@ -246,22 +246,27 @@ want to use data binding elsewhere, there are two options:
{{site.project_title}}. (Note that if you use template binding by itself, you cannot use {{site.project_title}}
expressions.)

### Using the `auto-binding` template element
### Using the auto-binding template element

The `<auto-binding>` element is a {{site.project_title}} custom element that extends the standard
The `auto-binding` element is a {{site.project_title}} custom element that extends the standard
`<template>` element. You can use it when you want to use {{site.project_title}} data
binding in a document without having to create a custom element just for this purpose.
binding in a page without having to create a custom element just for this purpose. Auto-binding
templates support a subset of the features available when you create your own custom element:

For an auto-binding template, the data model is on the template itself. For example, to use
data binding at the top level of a document:
- Full-featured data binding, with {{site.project_title}} expressions.
- [Declarative event mapping](polymer.html#declarative-event-mapping).
- [Automatic node finding](/polymer/polymer.html#automatic-node-finding).

For an auto-binding template, the data model is on the template itself. For example, to use data
binding at the top level of a page:

{% include samples/databinding/auto-binding.html %}

The auto-binding template inserts the instances it creates immediately after
itself in the DOM tree (_not_ in its shadow DOM). In this case, the quotes are
inserted as children of the `body` element.

When the instances are added, the auto-binding template fires the `template-bound`
After adding the instances, the auto-binding template fires the `template-bound`
event.

The `auto-binding` element is currently included automatically when you load the
Expand Down
17 changes: 11 additions & 6 deletions samples/databinding/auto-binding.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,23 @@
<!-- [START runnable-sample] -->
<!-- render data set -->
<template id="auto-bind-demo" is="auto-binding" repeat="{{quotes}}">
<h3>{{quote}}</h3>
- <em>{{attribution}}</em>
<div on-tap="{{quoteClicked}}">
<h3>{{quote}}</h3>
- <em>{{attribution}}</em>
</div>
</template>

<script>
var t = document.querySelector('#auto-bind-demo');
t.quoteClicked = function() {
alert('Quote clicked!');
};
t.quotes = [{
attribution: "Plautus",
quote: "Let deeds match words."
attribution: 'Plautus',
quote: 'Let deeds match words.'
}, {
attribution: "Groucho Marx",
quote: "Time flies like an arrow. Fruit flies like a banana."
attribution: 'Groucho Marx',
quote: 'Time flies like an arrow. Fruit flies like a banana.'
}];
</script>
<!-- [END runnable-sample] -->
Expand Down

0 comments on commit 80d2105

Please sign in to comment.