| Index: third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-repeat.html
|
| diff --git a/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-repeat.html b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-repeat.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..11712c65e1f1368db62613ead6bc68dec798126f
|
| --- /dev/null
|
| +++ b/third_party/polymer/v0_8/components-chromium/polymer/src/lib/template/x-repeat.html
|
| @@ -0,0 +1,87 @@
|
| +<!--
|
| +@license
|
| +Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
|
| +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
| +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
| +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
| +Code distributed by Google as part of the polymer project is also
|
| +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
| +--><!--
|
| +
|
| +**THIS ELEMENT IS EXPERIMENTAL. API AND NAME SUBJECT TO CHANGE.**
|
| +
|
| +The `x-repeat` element is a custom `HTMLTemplateElement` type extension that
|
| +automatically stamps and binds one instance of template content to each object
|
| +in a user-provided array. `x-repeat` accepts an `items` property, and one
|
| +instance of the template is stamped for each item into the DOM at the location
|
| +of the `x-repeat` element. The `item` property will be set on each instance's
|
| +binding scope, thus templates should bind to sub-properties of `item`.
|
| +
|
| +Example:
|
| +
|
| +```html
|
| +<dom-module id="employee-list">
|
| +
|
| + <template>
|
| +
|
| + <div> Employee list: </div>
|
| + <template is="x-repeat" items="{{employees}}">
|
| + <div>First name: <span>{{item.first}}</span></div>
|
| + <div>Last name: <span>{{item.last}}</span></div>
|
| + </template>
|
| +
|
| + </template>
|
| +
|
| + <script>
|
| + Polymer({
|
| + is: 'employee-list',
|
| + ready: function() {
|
| + this.employees = [
|
| + {first: 'Bob', last: 'Smith'},
|
| + {first: 'Sally', last: 'Johnson'},
|
| + ...
|
| + ];
|
| + }
|
| + });
|
| + </script>
|
| +
|
| +</dom-module>
|
| +```
|
| +
|
| +Notifications for changes to items sub-properties will be forwarded to template
|
| +instances, which will update via the normal structured data notification system.
|
| +
|
| +Mutations to the `items` array itself (`push`, `pop`, `splice`, `shift`,
|
| +`unshift`) are observed via `Array.observe` (where supported, or an
|
| +shim of this API on unsupported browsers), and template instances are kept in
|
| +sync with the data in the array.
|
| +
|
| +A view-specific filter/sort may be applied to each `x-repeat` by supplying a
|
| +`filter` and/or `sort` property. This may be a string that names a function on
|
| +the host, or a function may be assigned to the property directly. The functions
|
| +should implemented following the standard `Array` filter/sort API.
|
| +
|
| +In order to re-run the filter or sort functions based on changes to sub-fields
|
| +of `items`, the `observe` property may be set as a space-separated list of
|
| +`item` sub-fields that should cause a re-filter/sort when modified.
|
| +
|
| +For example, for an `x-repeat` with a filter of the following:
|
| +
|
| +```js
|
| +isEngineer: function(item) {
|
| + return item.type == 'engineer' || item.manager.type == 'engineer';
|
| +}
|
| +```
|
| +
|
| +Then the `observe` property should be configured as follows:
|
| +
|
| +```html
|
| +<template is="x-repeat" items="{{employees}}"
|
| + filter="isEngineer" observe="type manager.type">
|
| +```
|
| +
|
| +--><html><head><link rel="import" href="templatizer.html">
|
| +<link rel="import" href="../array-observe.html">
|
| +<link rel="import" href="../collection.html">
|
| +
|
| +</head><body><script src="x-repeat-extracted.js"></script></body></html>
|
|
|
Chromium Code Reviews
Issue 1082403004:
Import Polymer 0.8 and several key elements. (Closed)
Base URL: https://chromium.googlesource.com/chromium/src.git@master