1

我目前在另一个熨斗列表中有一个熨斗列表。父项的数据来自 firebase-query 元素，子项的数据是从每个父项计算得出的。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>

选择任意数量的项目后，用户可以点击工厂批量编辑价格。这就是我遇到问题的地方。我不知道如何访问正确的子铁列表以调用 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 而不是推荐的 this.$$(selector) 因为我一直遇到“函数 DNE”错误。但现在我有另一个问题......调用函数后，值得到正确更新，但我收到以下错误：

Uncaught TypeError: inst.dispatchEvent is not a function

这是完整错误消息的图片： 在此处输入图像描述

我看到了光明，希望有人能帮助我！

4

1 回答 1

0

好的，我会试试这个。我认为会发生以下情况，我猜这是基于 dom-repeat 的工作原理：

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

您采用 iron-list 所基于的变量，但将一个数组设置为另一个数组只会在 javascript 中创建一个引用。更新categoryItems后，您也会更新 this.$.categoryList.items。当您稍后设置新值时，iron-list 将进行脏检查并比较所有子属性，并且因为它们相等（因为 ... 引用），iron-list 不会更新 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);
于 2017-07-22T17:10:40.583 回答