Skip to content

Hybrid iron list 2.0

Emmanuel Garcia edited this page Jan 23, 2017 · 3 revisions

Requirements to make iron-list 2.0 work with Polymer 1.0:

Templatizer

Dependency in v2:

const templatizer = new Polymer.Templatizer();
this._ctor = templatizer.templatize(this._template, {
  instanceProps: instanceProps,
  fwdHostPropToInstance: this._fwdHostPropToInstance.bind(this),
  fwdInstancePropToHost: this._fwdInstancePropToHost.bind(this)
});

Dependency in v1:

behaviors: [
 Polymer.Templatizer
]

Stamping a template in v2:

let stampedTemplate = new this._ctor(this);
let inst = stampedTemplate._templateInstance;
inst.forwardProperty(this.as, item);
inst.forwardProperty(this.selectedAs, this.$.selector.isSelected(item));
inst.forwardProperty(this.indexAs, vidx);
inst.forwardProperty('tabIndex', this._focusedIndex === vidx ? 0 : -1);
inst.flushProperties();

Stamping a template in v1:

let stampedTemplate = this.stamp(null);
let inst = stampedTemplate._templateInstance;
inst[this.as] = item;
inst.__key__ = this._collection.getKey(item); // Collection doesn't exist in v2
inst[this.selectedAs] = this.$.selector.isSelected(item);
inst[this.indexAs] = vidx;

Array-selector

New API in v2:

  • selectIndex
  • deselectIndex
  • toogleIndex

Breaking changes in v2 due to the removal of Collection in Polymer 2:

test('modify item instance while being selected', function() {
  list.items = ['a', 'b', 'c', 'd'];
  list.selectionEnabled = true;
  Polymer.dom.flush();
  list.selectItem(0);
  list.set('items.0', 'z');
  assert.equal(list.selectedItem, 'z', 'single selection 1');
  list.selectItem(2);
  assert.equal(list.selectedItem, 'c', 'single selection 2');
  list.clearSelection();
  assert.isNull(list.selectedItem);
  // test multi selection
  list.multiSelection = true;
  list.selectItem(0);
  list.selectItem(1);
  assert.deepEqual(list.selectedItems, ['z', 'b'], 'multiple selection 1');
  list.set('items.1', 'y');
  assert.deepEqual(list.selectedItems, ['z', 'y'], 'multiple selection 2');
  list.deselectItem('y');
  assert.deepEqual(list.selectedItems, ['z'], 'multiple selection 3');
  list.deselectItem('z');
  assert.equal(list.selectedItems.length, 0);
});

Breaking changes to iron-list's selectItem and deselectItem in v2:

In v1, selectItem accepted an item or the index to the item in the list.items array. This API was ugly and led to cases where it was impossible to distinguish between indexes or numbers being used in list.items. In v2, I removed that behavior and selectIndex is the recommended way going forward. selectItem is still supported, but it only accepts values in the list.items array. selectItem in v2 is slow and operations like selectAll that rely on selectItem are also pretty slow.

Async modules

In v2, I proposed a few additions to the Polymer Async/debounce modules to enable scheduling of low priority tasks using requestIdleCallback. In v1, there will not be such API. The main change is:

// Proposed for v2
Polymer.Debouncer.debounce(debouncer, asyncModule, cb);

instead of:

// v1
Polymer.Debouncer.debounce(debouncer, cb, wait, context);