More performant attempt at solving #300

iron-list.html

@@ -683,9 +683,9 @@
       return this._viewportHeight === 0 ? Infinity : this._viewportHeight * this._maxPages;
     },
 
-   /**
-    * True if the current list is visible.
-    */
+    /**
+     * True if the current list is visible.
+     */
     get _isVisible() {
       return Boolean(this.offsetWidth || this.offsetHeight);
     },
@@ -1214,6 +1214,15 @@
       return this._virtualStart + (this._physicalCount - this._physicalStart) + pidx;
     },
 
+    /**
+     * Can be used to expand the item update logic to include any fields that
+     *  you need to update within the template for your virtual item.
+     *
+     * @param {Object} item - the item that you passed in
+     * @param {Object} instance - the current instance in the list
+     */
+    _propagateUpdates(item, instance) {},
+
     /**
      * Assigns the data models to a given set of items.
      * @param {!Array<number>=} itemSet
@@ -1224,6 +1233,7 @@
         var item = this.items && this.items[vidx];
         if (item != null) {
           var inst = this.modelForElement(el);
+          this._propagateUpdates(item, inst);
           inst.__key__ = this._collection ? this._collection.getKey(item) : null;
           this._forwardProperty(inst, this.as, item);
           this._forwardProperty(inst, this.selectedAs, this.$.selector.isSelected(item));

test/fixtures/x-list.html

@@ -42,6 +42,7 @@
         <div class="item" selected$="[[selected]]">
           <div style$="[[_computedItemHeight(item)]]" tabindex$="[[_computedTabIndex(tabIndex, useTabIndex)]]" hidden$="[[primitive]]">[[item.index]]</div>
           <div style$="[[_computedItemHeight(item)]]" tabindex$="[[_computedTabIndex(tabIndex, useTabIndex)]]" hidden$="[[!primitive]]">[[item]]</div>
+          <div id="prop">[[item.prop]]</div>
         </div>
       </template>
     </iron-list>

test/mutations.html

@@ -325,6 +325,27 @@
         PolymerFlush();
         assert.equal(getFirstItemFromList(list).textContent, 'correct');
       });
+
+      test('Issue #300: update properties when item properties update', () => {
+        list.items = buildDataSet(10);
+        PolymerFlush();
+        list.scrollToIndex(1);
+        assert.equal(list.children[2].querySelector('#prop').innerHTML, '');
+        assert.equal(list.children[3].querySelector('#prop').innerHTML, '');
+        var item = list.items[1];
+        item.prop = 'prop';
+        list.splice('items', 1, 1, item);
+        PolymerFlush();
+        assert.equal(list.children[2].querySelector('#prop').innerHTML, '');
+        item = list.items[2];
+        item.prop = 'prop2';
+        list._propagateUpdates = function (item, instance) {
+          instance.notifyPath('item.prop', item.prop);
+        };
+        list.splice('items', 2, 1, item);
+        PolymerFlush();
+        assert.equal(list.children[3].querySelector('#prop').innerHTML, 'prop2');
+      });
     });
 
     suite('mutableData', function() {
@@ -338,7 +359,7 @@
       test('should not use dirty checking if mutableData is true', function() {
         /**
          * This feature and Polymer.OptionalMutableDataBehavior is only available
-         * with Polymer 2.0. 
+         * with Polymer 2.0.
          */
         if (!Polymer.OptionalMutableDataBehavior.properties) {
           return;