阵列内的突变阵列(聚合物铁表)

Question

我目前在另一个铁表中有一个铁表。父项的数据来自一个firebase查询元素，子数据是从每个父项中计算出来的。db结构和代码看起来有点像这样：

DB: [
     category1: [
                 itemId1: {
                           price: 10,
                           title: "title" 
                          }
                ]
    ]



<iron-list id="categoryList" items="{{categories}}" multi-selection as="category">
        <template>
            <div class="category-holder">
                <iron-list id="{{category.$key}}" items="{{_removeExtraIndex(category)}}" as="item" selection-enabled multi-selection selected-items="{{selectedItems}}" grid>
                    <template>
                        <div class$="{{_computeItemClass(selected)}}">
                            <p>[[item.title]]</p>
                            <p>[[item.price]]</p>
                        </div>
                    </template>
                </iron-list>
            </div>
        </template>
    </iron-list>

在选择了任意数量的商品后，用户可以点击fab来批量编辑价格。这就是我遇到麻烦的地方。我不知道如何访问正确的子铁列表以调用list.set.我目前正在尝试以下非常讨厌的方法：

var categories = this.$.categoryList;
var categoryItems = categories.items;

(this.selectedItems).forEach(function(item) {
    var index = item.itemId;
    categoryItems.forEach(function(itemList, categoryIndex) {
    if (itemList[index]) {
         categories.set('item.' + categoryIndex + '.price', 10);
         }
    }, this);
}, this);

我正在迭代所选的项，以提取项索引，然后迭代父铁列表数据(categoryItems)，以检查给定项是否存在于该数据子集中。如果是这样，则使用类别索引，并尝试使用给定的路径调用父铁列表上的set，以访问要编辑的实际项。正如预期的那样，这是失败的。希望我已经说得够清楚了，任何帮助都将不胜感激！

编辑#1:

经过多次试验，我终于想出了如何正确地变异孩子的铁表：

(this.selectedItems).forEach(function(item) {
                var list = this.$.categoryList.querySelector('#' + item.category);
                var index = list.items.indexOf(item);
                list.set(["items", index, "price"], 30);                   
            }, this);

有几件事值得注意。我使用的是querySelector，而不是推荐的.$(选择器)，因为我经常遇到一个“函数DNE”错误。但是现在我有了另一个problem...after调用函数，这个值得到了正确的更新，但是我得到了以下错误：

Uncaught TypeError: inst.dispatchEvent is not a function

下面是完整错误消息的图片：

​

我看到光了，希望有人能帮我一把！

Answer 1

好吧，我试试看。我认为会发生以下情况，我猜这是基于dom-重复的工作方式：

  var categories = this.$.categoryList;
  var categoryItems = categories.items;

您接受铁列表所基于的变量，但是将一个数组设置为另一个数组只会在javascript中创建一个引用。一旦更新了categoryItems，也就更新了this.$.categoryList.items。当您稍后设置新值时，铁列表将进行脏检查并比较所有子属性，因为它们是相等的(因为.)，铁列表不会更新dom。

您应该做的是确保它是一个全新的副本，并且方法是使用JSON.parse(JSON.stringify(myArray))。

此外，我在代码中看到的一个主要缺陷是，您正在使用querySelector来选择一个元素，然后对其进行操作。您应该做的是使用this.categories，并且只使用这个变量。

因此，您的方法应该如下所示：

  // Get a freshly new array to manipulate
  var category = JSON.parse(JSON.stringify(this.categories);

  // Loop through it
  category.forEach(category) {
    // update your categoryList variable
  }

  // Update the iron list by notifying Polymer that categories has changed.
  this.set('categories', category);