Merge pull request #1947 from Polymer/1742-domif-kschaaf

Use single-property observer to deal better with if=undefined. Fixes #1742
Polymer · Jun 24, 2015 · ad81e44 · ad81e44
2 parents 20b8fc2 + 2e5a65b
commit ad81e44
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 6 deletions.
diff --git a/src/lib/template/dom-if.html b/src/lib/template/dom-if.html
@@ -44,7 +44,8 @@
        */
       'if': {
         type: Boolean,
-        value: false
+        value: false,
+        observer: '_queueRender'
       },
 
       /**
@@ -56,7 +57,8 @@
        */
       restamp: {
         type: Boolean,
-        value: false
+        value: false,
+        observer: '_queueRender'
       }
 
     },
@@ -65,10 +67,6 @@
       Polymer.Templatizer
     ],
 
-    observers: [
-      '_queueRender(if, restamp)'
-    ],
-
     _queueRender: function() {
       this._debounceTemplate(this._render);
     },

diff --git a/test/unit/dom-if.html b/test/unit/dom-if.html
@@ -48,6 +48,14 @@
     </template>
   </div>
 
+  <div id="structuredContainer">
+    <template is="dom-bind" id="structuredDomBind">
+      <template is="dom-if" id="structuredDomIf" if="{{item.show}}">
+        <div class="showing"></div>
+      </template>
+    </template>
+  </div>
+
   <script>
 
     suite('nested pre-configured dom-if', function() {
@@ -415,6 +423,52 @@
       });
     });
 
+    suite('structured data controlling if', function() {
+
+      test('item changed with no if field', function() {
+        var showing;
+        showing = structuredContainer.querySelector('.showing');
+        assert.notOk(showing);
+        structuredDomBind.item = {show: true};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.ok(showing);
+        assert.equal(getComputedStyle(showing).display, 'block');
+        structuredDomBind.item = {};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.ok(showing);
+        assert.equal(getComputedStyle(showing).display, 'none');
+        structuredDomBind.item = {show: true};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.ok(showing);
+        assert.equal(getComputedStyle(showing).display, 'block');
+      });
+
+      test('item changed with no if field (restamp)', function() {
+        var showing;
+        structuredDomIf.restamp = true;
+        structuredDomIf.if = false;
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.notOk(showing);
+        structuredDomBind.item = {show: true};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.ok(showing);
+        structuredDomBind.item = {};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.notOk(showing);
+        structuredDomBind.item = {show: true};
+        structuredDomIf.render();
+        showing = structuredContainer.querySelector('.showing');
+        assert.ok(showing);
+      });
+
+    });
+
   </script>
 
 </body>