Question

我正在尝试向数组地图添加内容，而值绑定不会接收更改： - （

我有这样的事情：

       properties: {
            deals: {
                type: Object,
                notify: true,
                value: function () {
                    return {
                        items: {
                            "MONDAY": [],
                            "TUESDAY": [],
                            "WEDNESDAY": [],
                            "THURSDAY": [],
                            "FRIDAY": [],
                            "SATURDAY": [],
                            "SUNDAY": []
                        }
                    }
                },
            },
            weekDays: {
                type: Array,
                value: function () {
                    return [
                        {"text": "Montag", "key": "MONDAY"},
                        {"text": "Dienstag", "key": "TUESDAY"},
                        {"text": "Mittwoch", "key": "WEDNESDAY"},
                        {"text": "Donnerstag", "key": "THURSDAY"},
                        {"text": "Freitag", "key": "FRIDAY"},
                        {"text": "Samstag", "key": "SATURDAY"},
                        {"text": "Sonntag", "key": "SUNDAY"}
                    ]
                },
            },
        },

然后我嵌套了dom-repeat来渲染元素。这在我使用像

这样的函数时有效

        _itemsForDay: function (day,map) {
            const data = map[day.key];
             return data;
        }

但是当我添加元素时，它没有被重绘，我尝试了很多notifyPath变体，但它没有呈现新元素： - （

这是我尝试合并为一个：

  add: function (e) {
            day = e.model.day.key;
            this.push("deals.items." + day,
                {
                    description: "Bla",
                    price1: "23,45€",
                    price2: "43,21€",
                    imageId: 1
                }
            );
            this.notifyPath("weekDays");
            this.notifyPath("weekDays.*");
            this.notifyPath("weekDays.splice");
            this.notifyPath("deals.items.*");
            this.notifyPath("deals.items.*");
            this.notifyPath("deals.items.splice");
            this.notifyPath("deals.items."+day);
            this.notifyPath("deals.items."+day+".*");
            this.notifyPath("deals.items."+day+".splice");
            this.notifyPath("weekDays.*");
            console.log("Length: "+this.deals.items[day].length)
        },

如何确保重新呈现地图键的内容（也可以重新渲染整个地图，我不在乎）。

模板如下所示：

       <tr>
            <template is="dom-repeat" items="{{weekDays}}" as="day" >
                <td>
                    <template is="dom-repeat" items="{{_itemsForDay(day,deals.items)}}" >
                        <div>
                            DESC: [[item.description]]
                            IMG: [[item.imageId]]
                            [[deals.price1Label]]: [[item.price1]]
                            [[deals.price2Label]]: [[item.price2]]
                        </div>
                    </template>
                    <paper-button on-click="add" data-day="[[day.key]]">
                        +
                    </paper-button>
                </td>
            </template>
        </tr>

有趣的是，当我删除外部循环并使用固定的工作日时，它可以工作：

              <td>
                    <template is="dom-repeat" items="{{deals.items.TUESDAY}}" >
                        <div>
                            DESC: [[item.description]]
                            IMG: [[item.imageId]]
                            [[deals.price1Label]]: [[item.price1]]
                            [[deals.price2Label]]: [[item.price2]]
                        </div>
                    </template>
                    <paper-button on-click="add" data-day="TUESDAY">
                        +
                    </paper-button>
                </td>

这会获取更改并呈现新项目，但之后我必须复制内部部分几次，这远非理想。

Answer 1

ZeeWolf在松弛的通道中有一个好主意，它有效：

创建一个新属性：

                dayLists: {
                    type: Array,
                    computed: '_computeDayLists(deals.items.*)'
                }

添加计算方法：

        _computeDayLists: function() {
            return this.weekDays.map(day => {
                const dayKey = day.key;
                const items = this.deals.items[dayKey];
                console.log("Found for "+dayKey+" #"+items.length+" items");
                return {
                    key: dayKey,
                    items: items
                }
            });
        },

更新模板：

           <template is="dom-repeat" items="{{dayLists}}" >
                <td>
                    <template is="dom-repeat" items="{{item.items}}" mutable-data>
                        <div>
                            DESC: [[item.description]]
                            IMG: [[item.imageId]]
                            [[deals.price1Label]]: [[item.price1]]
                            [[deals.price2Label]]: [[item.price2]]
                        </div>
                    </template>
                    <paper-button on-click="add">
                        +
                    </paper-button>
                </td>
            </template>

        add: function (e) {
            const day = e.model.item.key;
            this.push("deals.items." + day,
                {
                    description: "Bla",
                    price1: "23,45€",
                    price2: "43,21€",
                    imageId: 1,
                    new: true
                }
            );
            console.log("Length: " + this.deals.items[day].length)
        },

说明的

内部循环以某种方式没有获取更改，因此这种方法使用计算列表，该列表依赖于地图项内容（。*启用此项）。当某些内容发生变化时，会重新绘制列表。重要的是没有它的可变数据，这不起作用！

确保您拥有最新版本的聚合物。我有一个较旧的版本，由于配置错误的bower maven步骤没有更新，直到我更新了依赖项后才能正常工作。

Answer 2

我也遇到过这个问题，grrr！试试这个。

创建一个新的计算属性

static get properties() {
    return {
        ...
        'dayDeals': {
            type: Array,
            computed: 'computeDayDeals(deals.items)'
        }
    }
}

computeDayDeals(deals.items) {
    return Object.keys(deals.items).map(x => { day: x, deals: deals.items[x].deals });
}

将_itemsForDay(day,deals.items)更改为_itemsForDay(day, dayDeals.*)，并按照以下方式进行操作：

_itemsForDay(day, dayDeals) {
    return !!dayDeals.base ? dayDeals.base.find(x => x.day == day.key).deals : [];
}

更改嵌套dom-repeat

2 个答案: