Merge pull request #341 from sparlampe/bugfix/not_all_physical_items_…

…bind_updated Fixes #340 physical item not being bind-updated
PolymerElements · Jan 4, 2017 · aab8bae · aab8bae
2 parents e07f3b6 + 8b81248
commit aab8bae
Show file tree

Hide file tree

Showing 4 changed files with 181 additions and 11 deletions.
diff --git a/iron-list.html b/iron-list.html
@@ -1063,11 +1063,13 @@
      * notifying parent path change on each row.
      */
     _forwardParentProp: function(prop, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance[prop] = value;
-        }, this);
-      }
+      (this._physicalItems || [])
+              .concat([this._offscreenFocusedItem, this._focusBackfillItem])
+              .forEach(function(item) {
+                if (item) {
+                  item._templateInstance[prop] = value;
+                }
+              });
     },
 
     /**
@@ -1076,11 +1078,13 @@
      * notifying parent.<path> path change on each row.
      */
     _forwardParentPath: function(path, value) {
-      if (this._physicalItems) {
-        this._physicalItems.forEach(function(item) {
-          item._templateInstance.notifyPath(path, value, true);
-        }, this);
-      }
+      (this._physicalItems || [])
+              .concat([this._offscreenFocusedItem, this._focusBackfillItem])
+              .forEach(function(item) {
+                if (item) {
+                  item._templateInstance.notifyPath(path, value, true);
+                }
+              });
     },
 
     /**

diff --git a/test/bindings-host-to-item.html b/test/bindings-host-to-item.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<!--
+@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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+<html>
+<head>
+    <meta charset="UTF-8">
+    <title>iron-list test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
+
+    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+    <script src="../../web-component-tester/browser.js"></script>
+
+    <link rel="import" href="helpers.html">
+    <link rel="import" href="x-list-with-bindings.html">
+
+</head>
+<body>
+
+<test-fixture id="listWithBindings">
+    <template>
+        <x-list-with-bindings></x-list-with-bindings>
+    </template>
+</test-fixture>
+
+<script>
+
+    suite('host property and sub-property bindings to list items', function() {
+        var list, container,
+            propertyText="propertyText",
+            anotherPropertyText="anotherPropertyText",
+            subPropertyText="subPropertyText",
+            anotherSubPropertyText="anotherSubpropertyText",
+            getItemScopedBinding= function(){
+                return getFirstItemFromList(list).parentElement.querySelector('[item-scope-binding]').textContent
+            },
+            getHostScopedPropertyBinding = function(){
+                return getFirstItemFromList(list).parentElement.querySelector('[host-scope-property-binding]').textContent;
+            },
+            getHostScopedSubpropertyBinding = function(){
+                return getFirstItemFromList(list).parentElement.querySelector('[host-scope-subproperty-binding]').textContent
+            };
+
+        setup(function() {
+            container = fixture('listWithBindings');
+            list = container.list;
+        });
+
+        test('changes are forwarded to the off screen focused item', function() {
+            list.items = buildDataSet(100);
+            var firstItem = list.items[0],
+                lastItem = list.items[list.items.length-1];
+
+            list.scrollToItem(firstItem);
+            list.selectItem(firstItem);
+
+            var topItemMarker=getItemScopedBinding();
+
+            container.set('propertyForReassignmentForwarding', propertyText);
+            container.set('propertyForPathChangeForwarding.text', subPropertyText);
+
+            assert.equal(getHostScopedPropertyBinding(),propertyText);
+            assert.equal(getHostScopedSubpropertyBinding(),subPropertyText);
+
+            list.scrollToItem(lastItem);
+
+            assert.notEqual(getItemScopedBinding(),
+                  topItemMarker,"selected item became invisible");
+
+            container.set('propertyForReassignmentForwarding', anotherPropertyText);
+            container.set('propertyForPathChangeForwarding.text', anotherSubPropertyText);
+
+            list.scrollToItem(firstItem);
+
+            assert.equal(getItemScopedBinding(),
+                    topItemMarker,"selected item became again visible");
+
+            assert.equal(getHostScopedPropertyBinding(),anotherPropertyText);
+            assert.equal(getHostScopedSubpropertyBinding(),anotherSubPropertyText);
+        });
+    });
+</script>
+
+</body>
+</html>
diff --git a/test/index.html b/test/index.html
@@ -27,7 +27,8 @@
       'dynamic-item-size.html',
       'different-heights.html',
       'grid.html',
-      'grid-rtl.html'
+      'grid-rtl.html',
+      'bindings-host-to-item.html'
     ]);
   </script>
 </body>

diff --git a/test/x-list-with-bindings.html b/test/x-list-with-bindings.html
@@ -0,0 +1,74 @@
+<!--
+@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
+The complete set of authors may be found at http://polymer.github.io/AUTHORS
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
+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
+-->
+
+<link rel="import" href="../../polymer/polymer.html">
+<link rel="import" href="../../iron-flex-layout/iron-flex-layout.html">
+<link rel="import" href="../iron-list.html">
+
+<dom-module id="x-list-with-bindings">
+  <template>
+    <style>
+      :host {
+        @apply(--layout-fit);
+        @apply(--layout-vertical);
+
+        display: block;
+      }
+
+      .item {
+        color: white;
+        height: 100px;
+      }
+
+      iron-list {
+        overflow: hidden;
+        background-color: black;
+        height: 300px;
+      }
+    </style>
+
+    <iron-list items="[[data]]" as="item" id="list">
+      <template>
+        <div class="item">
+          <div item-scope-binding>[[item.index]]</div>
+          <div host-scope-property-binding>[[propertyForReassignmentForwarding]]</div>
+          <div host-scope-subproperty-binding>[[propertyForPathChangeForwarding.text]]</div>
+        </div>
+      </template>
+    </iron-list>
+  </template>
+
+</dom-module>
+
+<script>
+  Polymer({
+    is: 'x-list-with-bindings',
+
+    properties: {
+      data: {
+        type: Array
+      },
+      propertyForReassignmentForwarding: {
+        type: String,
+        value:"somePropertyText"
+      },
+      propertyForPathChangeForwarding: {
+        type: Object,
+        value: function(){
+          return {text:"someSubPropertyText"}
+        }
+      }
+    },
+
+    get list() {
+      return this.$.list;
+    }
+  });
+</script>