聚合物计算绑定不会在更新时重新计算答案

【问题标题】：Polymer computed binding doesn't get recalculated on update聚合物计算绑定不会在更新时重新计算
【发布时间】：2016-04-22 13:42:35
【问题描述】：

我有一个生成表格行的dom-repeat 模板，其中一个行单元格包含一个按钮，当行值具有特定值时，我希望禁用该按钮。所以我的组件有这段代码，它使用计算绑定来设置按钮的 disabled 属性的值：

<template is="dom-repeat" items="{{list}}" as="ticket">
    <tr class$="{{ticket.status}}">
        <td class="actions">
            <paper-icon-button icon="add" on-tap="incTickets"
                disabled="{{noAvailableTickets(ticket)}}">
            </paper-icon-button>
        </td>
        <td>[[ticket.amount]]</td>
        <td>[[ticket.event.title]]</td>
    </tr>
</template>

在我的代码中我有这个方法：

noAvailableTickets : function(ticket) {
    return ticket.event.available_tickets <= 0;
}

我可以看到第一次创建列表时调用了计算绑定方法，每个项目一次。

然后当我更新项目时，像这样：

this.set('list.' + ind + '.amount', newamount);

不会重新计算计算的绑定，也不会再次调用该方法，即使我可以在模板中的 ticket.amount 显示中看到值实际上发生了变化。

Polymer Data Binding entry in the developer's guide 对计算绑定有这样的说法：

[...] 属性绑定到computeFullName 的返回值，每当第一次或最后一次更改时都会重新计算该值。 [first 和 last 是 computeFullName 的声明参数]

因此，假设计算绑定不知道对象值、其amount 属性以及其他逻辑如何使用它来更新available_tickets 属性之间的相关性，我尝试添加@987654334带有完整更新对象的@命令，如下所示：

this.notifyPath('list.' + displayId, ticket);

但这似乎没有任何效果。我错过了什么？

【问题讨论】：

我知道这个问题已经得到解答，但您是否考虑过使用this.push('path', value) 而不是this.set？
push 添加到数组中，但我不想添加其他项，只需更新现有项即可。

标签： javascript polymer web-component

【解决方案1】：

我怀疑notifyPath 不会因为its dirty check 而触发更新。也就是说，list[0] 和 ticket 指的是同一个实例（尽管实例的属性已经改变），所以它不被认为是“脏”的。

我的jsbin 实验表明，将list[0] 设置为修改后的克隆确实会触发更新。

attached: function() {
  setTimeout(function() {
    var copy = this.list[0].clone();
    copy.amount = 'FREE';
    this.set('list.0', copy);
  }.bind(this), 1000);
}

但这可能不是实现这一目标的最佳方式。

根据 Polymer docs，要在 ticket 子属性更改时触发计算绑定，您可以在绑定中使用 ticket.*：

<paper-icon-button  disabled="{{noAvailableTickets(ticket.*)}}">

Polymer({
  ...
  noAvailableTickets: function(change) {
    var ticket = change.base;
    return ticket.event.available_tickets <= 0;
  }
});

这是jsbin。

【讨论】：