Polymer core-localstoreage TypeError: Cannot read property 'save' of undefined

Question

I'm following this tutorial to build a Material Design app with Polymer.

http://io2014codelabs.appspot.com/static/codelabs/polymer-build-mobile/#6

when I implement this i get this error

TypeError: Cannot read property 'save' of undefined

this error is happening in the dataChanged function

anyone know why?

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/core-icons/core-icons.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/core-localstorage/core-localstorage.html">


<polymer-element name="codelab-app">
<template>
  <link rel="stylesheet" href="styles.css">
  <core-drawer-panel id="drawerPanel" responsiveWidth="600px">

    <core-header-panel drawer>
      <core-toolbar>Menu</core-toolbar>
    </core-header-panel>

    <core-header-panel main>
      <core-toolbar>
        <paper-icon-button icon="menu" on-click="{{toggleDrawer}}"></paper-icon-button>
        <span flex>My notes</span>
        <paper-icon-button icon="search"></paper-icon-button>
        <paper-icon-button icon="more-vert"></paper-icon-button>
        <paper-fab icon="icons:add" on-click="{{showNewNoteInput}}"></paper-fab>
      </core-toolbar>
      <div class="content">
        <paper-input id="newNoteInput"
             floatingLabel
             label="Add a new note"
             on-change="{{add}}"
             value="{{newNote}}"></paper-input>
        <template repeat="{{data}}" >
          <div center horizontal layout class="item">
            <paper-checkbox checked="{{done}}" on-change="{{dataChanged}}"></paper-checkbox>
            <div flex class="card">
              <p>{{body}}</p>
            </div>
          </div>
          <core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
        </template>
      </div>
    </core-header-panel>

  </core-drawer-panel>
</template>
<script>
  Polymer('codelab-app', {
    data: [],
    add: function() {
      if (this.newNote) {
        this.data.unshift({
          body: this.newNote,
          done: false
        });
        this.$.newNoteInput.style.display = 'none';
        this.$.newNoteInput.value = null;
      }
    },
    toggleDrawer: function() {
      this.$.drawerPanel.togglePanel();
    },
    ready: function() {
      this.$.newNoteInput.style.display = 'none';
    },
    showNewNoteInput: function() {
      this.$.newNoteInput.style.display = 'block';
    },
    dataChanged: function() {
      this.$.storage.save();
    }
  });
</script>
</polymer-element>

Answer 1

You are looping the creation of a static ID tag, and because you shouldn't have duplicates of an ID, it is throwing an error.

Lines causing the issue:

<template repeat="{{data}}" >
          <core-localstorage id="storage" name="codelab-app-storage" value="{{data}}"></core-localstorage>
</template>