third_party/polymer/components-chromium/core-meta/demo.html

   1 <!DOCTYPE html>
   2 <!--
   3 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <html>
  11 <head>
  12   <title>core-meta</title>
  13
  14   <script src="../webcomponentsjs/webcomponents.js"></script>
  15   <link rel="import" href="core-meta.html">
  16 </head>
  17
  18 <body>
  19
  20   <core-meta id="x-foo" label="foo"></core-meta>
  21   <core-meta id="x-bar" label="bar"></core-meta>
  22   <core-meta id="x-zot" label="zot"></core-meta>
  23
  24   <core-meta id="apple" label="apple" type="fruit"></core-meta>
  25   <core-meta id="orange" label="orange" type="fruit"></core-meta>
  26   <core-meta id="grape" label="grape" type="fruit"></core-meta>
  27
  28   <h2>meta-data</h2>
  29
  30   <template id="default" repeat="{{metadata}}">
  31     <div>{{label}}</div>
  32   </template>
  33
  34   <h2>meta-data (type: fruit)</h2>
  35
  36   <template id="fruit" repeat="{{metadata}}">
  37     <div>{{label}}</div>
  38   </template>
  39
  40   <script>
  41
  42     document.addEventListener('polymer-ready', function() {
  43       var meta = document.createElement('core-meta');
  44       document.querySelector('template#default').model = {
  45         metadata: meta.list
  46       };
  47
  48       var fruitMeta = document.createElement('core-meta');
  49       fruitMeta.type = 'fruit';
  50       document.querySelector('template#fruit').model = {
  51         metadata: fruitMeta.list
  52       };
  53     });
  54
  55   </script>
  56
  57 </body>
  58 </html>