Polymer not removing deleted element

问题

Using the Polymer Stater Kit, I created two custom elements :

• flow-list.html (here is declared the flowElementArray)
• flow-element.html (here is defined the delete function)

In the app.js file, I also defined a addElement function.

I can add elements to the flowElementArray, and they are displayed.

BUT, when I remove elements from the flowElementArray, they are still displayed.

Here is how I got the following result :

1. App start (2 items pre-loaded)
2. I delete one item (the item stays on the screen)
3. I add one item (the item is added, above the deleted one by the way)

What could be the source of this weird behaviour ?

Edit I couldn't make the example run on plunker/codepen.io/jsbin so here it is on github.

• GitHub repo : https://github.com/JeanReneRobin/octo
• GitHub page : http://jeanrenerobin.github.io/octo/

How I add an element :

app.storageLoaded = function() {

  if (this.$.s1.value === '' || this.$.s2.value === '') {
    window.alert('One field is Empty!');
    return;
  }

  this.$.flowListID.push('flowDictionnary',
  {
    first: this.$.s1.value,
    last: this.$.s2.value
  });
};

How I remove :

removeItem: function() {
  var counter = 0;
  while (counter < this.dict.length) {
    var item = this.dict[counter];
    if (item.first === this.name) {
      this.dict.splice(counter, 1);
    } else {
      counter++;
    }
  }
}

回答1:

When doing operations on array properties in Polymer, you need to use the this.push('myArrayProperty', item), this.splice('myArrayProperty', 0, 1) or call this.notifyPath('myArrayProperty') after the operation.

removeItem: function() {
  var counter = 0;
  while (counter < this.dict.length) {
    var item = this.dict[counter];
    if (item.first === this.name) {
      // this.dict.splice(counter, 1);
      this.splice('dict', counter, 1);
    } else {
      counter++;
    }
  }
}

来源：https://stackoverflow.com/questions/34772535/polymer-not-removing-deleted-element