Question

在Polymer 1. *中，我有一个dom重复。当我对数组itemsCollection进行突变时，obj.property在DOM中不会更新。

我在'this.set（itemCollection.${i}.value，existing.value）;之后尝试了'this.notifyPath（itemCollection.${i}.value）'。但它没有在DOM中更新。

我应该改用this.notifySplices吗？如果是这样，在this.set( itemCollection。$ {i} .value , existing.value);之后，我将如何使用它？

  _populateAlerts: function(existingValues) {
    this.itemCollection.forEach((question, i)=> {
      const existing =
        existingValues.find(value => value.name === question.name);

      this.set(`itemCollection.${i}.picklist_value_id`,
        existing.picklist_value_id);
      this.set(`itemCollection.${i}.value`, existing.value);
    });
  },

Answer 1

如果您使用this.notifyPath，就不需要

this.set，只有在另一个框架设置了变量时，才应该使用

itemCollection。

这是奇怪的代码，具有三次循环，并通过Polymer方法在所述数组中循环时，在existingValues中设置了子属性。

无论如何，我想知道是否存在数组引用问题。 itemCollection = existingValues的地方，因此itemCollection每次更改时，itemCollection也会更改，但是不会更新DOM。这意味着this.set在通过itemCollection进行设置时会尝试将自身设置为已经存在的值，因此不会通过脏检查来更新DOM。

一个简单的解决方案可能是仅将_populateAlerts: function(existingValues) { this.itemCollection.forEach((question, i)=> { const existing = existingValues.find(value => value.name === question.name); this.set(`itemCollection.${i}.picklist_value_id`, existing.picklist_value_id); this.set(`itemCollection.${i}.value`, existing.value); }); this.set('itemCollection', JSON.parse( JSON.stringify(this.itemCollection) ); // Alternatively // const tempArr = JSON.parse( JSON.stringify(this.itemCollection) ); // this.set('itemCollection, []); // override dirty checking, as stated in the documentation // this.set('itemCollection', tempArr); },设置为其自身的副本。

existingValues

另一种解决方案是创建一个existingValues的新数组，打破“参考链”，使itemCollection！= _populateAlerts: function(existingValues) { const copiedExistingValues = JSON.parse( JSON.stringify(existingValues) ); this.itemCollection.forEach((question, i)=> { const existing = copiedExistingValues.find(value => value.name === question.name); this.set(`itemCollection.${i}.picklist_value_id`, existing.picklist_value_id); this.set(`itemCollection.${i}.value`, existing.value); }); },。也就是说，如果该问题是参考问题。

_populateAlerts: function(existingValues) {
  const existingValuesObj = this._createObjectFrom(existingValues, 'name');

  this.itemCollection.forEach((question, i)=> {
    this.set(`itemCollection.${i}.picklist_value_id`,
      existingValuesObj[question.name].picklist_value_id);
    this.set(`itemCollection.${i}.value`, existingValuesObj[question.name].value);
  });
},

_createObjectFrom: function (arr, property, overwritePreviousObj) {
  var obj = {};
  var propertyName = '';

  for (var i = 0; i < arr.length; i++) {
     propertyName = arr[i][property];

     if (overwritePreviousObj) {
       obj[propertyName] = arr[i];
     } else if (!obj.hasOwnProperty(propertyName) {
       obj[propertyName] = arr[i];
     }
  }

  return obj;
},

但是，如果您只对第一次出现感兴趣，我将创建一个existingArrays对象，以避免三次循环，同时也破坏了参考链。

div {
  position: relative;
  display: inline-block;
  color: white;
  font-size: 18px;
  padding: 50px;
}

div > * {
  position: relative;
  z-index: 2;
}

div.red {
  background: red;
}

div.green {
  background: green;
}

div.blue {
  background: blue;
}

div:after {
  content: '';
  display: inline-block;
  background: black;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  z-index: 1;
}

div:hover::after {
  opacity: .3;
}

聚合物-通知DOM

1 个答案: