Simplify iron form demo

vaadin · Feb 7, 2019 · 924b45c · 924b45c
1 parent db80797
commit 924b45c
Showing 1 changed file with 15 additions and 22 deletions.
diff --git a/demo/custom-field-advanced-demos.html b/demo/custom-field-advanced-demos.html
@@ -16,7 +16,15 @@ <h3>Usage with iron-form</h3>
           </vaadin-custom-field>
           <vaadin-custom-field name="price" label="Price of the item">
             <vaadin-text-field></vaadin-text-field>
-            <vaadin-select></vaadin-select>
+            <vaadin-select>
+              <template>
+                <vaadin-list-box>
+                  <vaadin-item>Euro</vaadin-item>
+                  <vaadin-item>Dollar</vaadin-item>
+                  <vaadin-item>Pound</vaadin-item>
+                </vaadin-list-box>
+              </template>
+            </vaadin-select>
           </vaadin-custom-field>
           <br>
           <vaadin-button>Get serialized values</vaadin-button>
@@ -25,30 +33,15 @@ <h3>Usage with iron-form</h3>
         <script>
           window.addDemoReadyListener('#custom-field-advanced-demos-iron-form-example', function(document) {
             const form = document.querySelector('iron-form');
-            const btn = document.querySelector('vaadin-button');
-            btn.addEventListener('click', function() {
+            const serializeBtn = document.querySelector('vaadin-button');
+
+            serializeBtn.addEventListener('click', function() {
               const serializedValues = form.serializeForm();
               document.querySelector('#msg').innerHTML =
-                'date: ' + serializedValues['invoice-date'] + '<br>' +
-                'price: ' + serializedValues['price'];
+                `date: ${serializedValues['invoice-date']} 
+                 <br>
+                 price: ${serializedValues['price']}`;
             });
-
-            document.querySelector('vaadin-select').renderer = function(root) {
-              // Check if there is a list-box generated with the previous renderer call to update its content instead of recreation
-              if (root.firstChild) {
-                return;
-              }
-              // create the <vaadin-list-box>
-              const listBox = window.document.createElement('vaadin-list-box');
-              // append 3 <vaadin-item> elements
-              ['Euro', 'Dollar', 'Pound'].forEach(function(name) {
-                const item = window.document.createElement('vaadin-item');
-                item.textContent = name;
-                listBox.appendChild(item);
-              });
-              // update the content
-              root.appendChild(listBox);
-            };
           });
         </script>
       </template>