Merge branch 'dom-repeat-docs'

Polymer · Feb 2, 2018 · abe4d9a · abe4d9a
2 parents 82cd3da + 5fa059f
commit abe4d9a
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 48 deletions.
diff --git a/lib/elements/array-selector.html b/lib/elements/array-selector.html
@@ -373,40 +373,50 @@
    *   <template>
    *
    *     <div> Employee list: </div>
-   *     <template is="dom-repeat" id="employeeList" items="{{employees}}">
+   *     <dom-repeat id="employeeList" items="{{employees}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
-   *         <div>Last name: <span>{{item.last}}</span></div>
-   *         <button on-click="toggleSelection">Select</button>
-   *     </template>
+   *           <div>Last name: <span>{{item.last}}</span></div>
+   *           <button on-click="toggleSelection">Select</button>
+   *       </template>
+   *     </dom-repeat>
    *
    *     <array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector>
    *
    *     <div> Selected employees: </div>
-   *     <template is="dom-repeat" items="{{selected}}">
+   *     <dom-repeat items="{{selected}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
    *         <div>Last name: <span>{{item.last}}</span></div>
-   *     </template>
+   *       </template>
+   *     </dom-repeat>
    *
    *   </template>
    *
    * </dom-module>
    * ```
    *
    * ```js
-   * Polymer({
-   *   is: 'employee-list',
-   *   ready() {
-   *     this.employees = [
-   *         {first: 'Bob', last: 'Smith'},
-   *         {first: 'Sally', last: 'Johnson'},
-   *         ...
-   *     ];
-   *   },
-   *   toggleSelection(e) {
-   *     let item = this.$.employeeList.itemForElement(e.target);
-   *     this.$.selector.select(item);
-   *   }
-   * });
+   *class EmployeeList extends Polymer.Element {
+   *  static get is() { return 'employee-list'; }
+   *  static get properties() {
+   *    return {
+   *      employees: {
+   *        value() {
+   *          return [
+   *            {first: 'Bob', last: 'Smith'},
+   *            {first: 'Sally', last: 'Johnson'},
+   *            ...
+   *          ];
+   *        }
+   *      }
+   *    };
+   *  }
+   *  toggleSelection(e) {
+   *    let item = this.$.employeeList.itemForElement(e.target);
+   *    this.$.selector.select(item);
+   *  }
+   *}
    * ```
    *
    * @polymer

diff --git a/lib/elements/dom-repeat.html b/lib/elements/dom-repeat.html
@@ -43,10 +43,12 @@
    *   <template>
    *
    *     <div> Employee list: </div>
-   *     <template is="dom-repeat" items="{{employees}}">
+   *     <dom-repeat items="{{employees}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
    *         <div>Last name: <span>{{item.last}}</span></div>
-   *     </template>
+   *       </template>
+   *     </dom-repeat>
    *
    *   </template>
    *
@@ -116,8 +118,7 @@
    * Then the `observe` property should be configured as follows:
    *
    * ```html
-   * <template is="dom-repeat" items="{{employees}}"
-   *           filter="isEngineer" observe="type manager.type">
+   * <dom-repeat items="{{employees}}" filter="isEngineer" observe="type manager.type">
    * ```
    *
    * @customElement

diff --git a/types/lib/elements/array-selector.d.ts b/types/lib/elements/array-selector.d.ts
@@ -143,40 +143,50 @@ declare namespace Polymer {
    *   <template>
    *
    *     <div> Employee list: </div>
-   *     <template is="dom-repeat" id="employeeList" items="{{employees}}">
+   *     <dom-repeat id="employeeList" items="{{employees}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
-   *         <div>Last name: <span>{{item.last}}</span></div>
-   *         <button on-click="toggleSelection">Select</button>
-   *     </template>
+   *           <div>Last name: <span>{{item.last}}</span></div>
+   *           <button on-click="toggleSelection">Select</button>
+   *       </template>
+   *     </dom-repeat>
    *
    *     <array-selector id="selector" items="{{employees}}" selected="{{selected}}" multi toggle></array-selector>
    *
    *     <div> Selected employees: </div>
-   *     <template is="dom-repeat" items="{{selected}}">
+   *     <dom-repeat items="{{selected}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
    *         <div>Last name: <span>{{item.last}}</span></div>
-   *     </template>
+   *       </template>
+   *     </dom-repeat>
    *
    *   </template>
    *
    * </dom-module>
    * ```
    *
    * ```js
-   * Polymer({
-   *   is: 'employee-list',
-   *   ready() {
-   *     this.employees = [
-   *         {first: 'Bob', last: 'Smith'},
-   *         {first: 'Sally', last: 'Johnson'},
-   *         ...
-   *     ];
-   *   },
-   *   toggleSelection(e) {
-   *     let item = this.$.employeeList.itemForElement(e.target);
-   *     this.$.selector.select(item);
-   *   }
-   * });
+   * class EmployeeList extends Polymer.Element {
+   *  static get is() { return 'employee-list'; }
+   *  static get properties() {
+   *    return {
+   *      employees: {
+   *        value() {
+   *          return [
+   *            {first: 'Bob', last: 'Smith'},
+   *            {first: 'Sally', last: 'Johnson'},
+   *            ...
+   *          ];
+   *        }
+   *      }
+   *    };
+   *  }
+   *  toggleSelection(e) {
+   *    let item = this.$.employeeList.itemForElement(e.target);
+   *    this.$.selector.select(item);
+   *  }
+   * }
    * ```
    */
   class ArraySelector extends

diff --git a/types/lib/elements/dom-repeat.d.ts b/types/lib/elements/dom-repeat.d.ts
@@ -32,10 +32,12 @@ declare namespace Polymer {
    *   <template>
    *
    *     <div> Employee list: </div>
-   *     <template is="dom-repeat" items="{{employees}}">
+   *     <dom-repeat items="{{employees}}">
+   *       <template>
    *         <div>First name: <span>{{item.first}}</span></div>
    *         <div>Last name: <span>{{item.last}}</span></div>
-   *     </template>
+   *       </template>
+   *     </dom-repeat>
    *
    *   </template>
    *
@@ -105,8 +107,7 @@ declare namespace Polymer {
    * Then the `observe` property should be configured as follows:
    *
    * ```html
-   * <template is="dom-repeat" items="{{employees}}"
-   *           filter="isEngineer" observe="type manager.type">
+   * <dom-repeat items="{{employees}}" filter="isEngineer" observe="type manager.type">
    * ```
    */
   class DomRepeat extends