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

Question

我有一个生成 table 行的 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 对计算绑定有这样的说法：

the [...] property is bound to the return value of computeFullName, which is recalculated whenever first or last changes. [first and last are the declared arguments for computeFullName]

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

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

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

Answer 1

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

我的 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 sub属性更改时触发计算绑定，您可以在绑定中使用 ticket.*：

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

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

这是一个jsbin。

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

Polymer computed binding doesn't get recalculated on update

javascript

web-component

polymer