title: In Polymer 2.0 how to observe edits to properties of an object bound to an element inside dom-repeat?
body: <p>(This question and code sample is for Polymer 2, but it's possible the same issue is present in 1.x)</p>
  
  <p><strong>The Goal:</strong></p>
  
  <p>I want to create an element (the Editor) that allows viewing/editing of the properties of certain types of objects, and another element (the List) that displays editable arrays of these objects, delegating the viewing/editing to the Editor element, while retaining control over the addition/removal of obejcts from the list.  A to-do list is a good example of this (note: the Polymer to-do list examples floating around out there, as far as I'm aware, do not do what I need, read on to see why).  I am trying to do this in Polymer 2.0, but it's not clear that the issue is specific to 2.0.</p>
  
  <p><strong>The Obstacle:</strong></p>
  
  <p>First, here's a bit of code on plunker: </p>
  
  <p><a href="https://plnkr.co/edit/Yji9kl63sOdnHJiv4CCU" rel="nofollow noreferrer">https://plnkr.co/edit/Yji9kl63sOdnHJiv4CCU</a></p>
  
  <p>The List element:</p>
  
  <pre><code>&lt;link rel="import" href="./editor-element.html"&gt;
  
  &lt;dom-module id="list-element"&gt;
      &lt;template&gt;
          &lt;dom-repeat items="{{list}}" as="item"&gt;
              &lt;template&gt;
                  &lt;div class="item"&gt;
                      &lt;editor-element todo="{{item}}"&gt;
                      &lt;/editor-element&gt;
                  &lt;/div&gt;
              &lt;/template&gt;
          &lt;/dom-repeat&gt;
  
      &lt;/template&gt;
      &lt;script&gt;
  
          class ListElement extends Polymer.Element {
  
              static get is() {
                  return "list-element";
              }
  
              static get properties() {
                  return {
                      list: {
                          type: Array,
                          value:function() {
                              return []
                          }
                      }
                  }
              }
  
              ready() {
                  super.ready();
                  this.push("list", {
                      description:"one"
                  })
                  this.push("list", {
                      description:"two"
                  })
                  setTimeout(function() {
                      this.set("list.0.description", "one edited");
                  }.bind(this), 500)
                  setTimeout(function() {
                      this.push("list", {
                          description:"three"
                      })
                  }.bind(this), 1000)
              }
          }
  
          customElements.define(ListElement.is, ListElement);
  
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>The Editor element:</p>
  
  <pre><code>&lt;dom-module id="editor-element"&gt;
      &lt;template&gt;
          &lt;div&gt;Editor for [[todo.description]]&lt;/div&gt;
      &lt;/template&gt;
      &lt;script&gt;
  
          class EditorElement extends Polymer.Element {
  
              static get is() {
                  return "editor-element";
              }
  
              static get properties() {
                  return {
                      todo:{
                          type:Object,
                          value:function() {
                              return {};
                          }
                      }
                  }
              }
  
              static get observers() {
                  return [
                      "observe(todo.description)"
                  ]
              }
  
              observe(p1) {
                  console.log("Observed change for TODO item description: "+p1);
              }
          }
  
          customElements.define(EditorElement.is, EditorElement);
  
      &lt;/script&gt;
  &lt;/dom-module&gt;
  </code></pre>
  
  <p>The problem is that the observer in the Editor that is supposed to watch for edits to a to-do item is being fired when a new to-do item is created, in addition to when an existing to-do item is edited.  This is happening BOTH for the new to-do item and for existing to-do items that have not been edited.  In other words, if I have item A and B already on the list, and I add item C, the to-do property observer in the Editor is fired three times, one for each new/existing item.  This happens regardless of whether the new item is pushed or unshifted onto/into the list.  I understand from discussion on the Polymer 2 slack channel that the unshift behaviour is to be expected, but the push behaviour is unexpected.</p>
  
  <p><strong>The Question:</strong></p>
  
  <p>What is the Polymer Way (2.0 preferably) to achieve this use case?  I do not want to pollute the List element with code to handle edits to a to-do item.  The to-do items themselves are objects that may gain more properties in the future, so I don't want to individually bind each property of the dom-repeated item to a property in the Editor element, because this is a code maintenance nuisance.  I want to just bind the entire to-do item in each pass of dom-repeat, and allow the Editor to deal with which properties are editable and how. </p>
  
  <p>The answer to my question may be "Polymer can't do this" or it may be "You are misunderstanding something fundamental about Polymer", either or both of which I would love to know, so please set me straight if I am missing something important. Hopefully though, there is a polymer way to do what I'm asking.</p>