using core-list in auto-binding template

[Nemo64]

The core-list uses model to expose the current element. But <template is="auto-binding"> sets model to the template element. When used in such a template, every entry will have the <template> as model and not the object it is supposed to be.

I was just very confused why my list didn't show any data.

[robdodson]

It works in an auto-binding template.

<template is="auto-binding" id="app">
    <core-list data="{{data}}" flex>
      <template>
        <div class="row" layout horizontal center>
          <div data-index="{{index}}">{{model.name}}</div>
        </div>
      </template>
    </core-list>
  </template>

var app = document.querySelector('#app');
app.data = generateContacts();

function generateContacts() {
  var data = [];
  for(var i = 0; i < 1000; i++) {
    data.push({
      name: faker.name.findName(),
      avatar: faker.internet.avatar()
    });
  }
  return data;
}

I'm using faker.js to generate dummy data.

You should note the data-index property I added. There's currently a bug in core-list which will cause it to repeat items when inside an auto-binding template. Adding the binding for index seems to poke Object.observe and trigger its update.

[Nemo64]

data-index seems to do the trick, thanks. I also found, that the model is accessible though model_ but that is probably private ;)

But at least I now know that i did't do anything wrong here.