javascript - polymer 计算绑定(bind)不会在更新时重新计算

Question

我有一个 dom-repeat 模板，它生成表行，其中行单元格之一包含一个按钮，我希望在行值具有特定值时禁用该按钮。所以我的组件有这段代码，它使用计算绑定(bind)来设置按钮的 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;
}

我可以看到，首次创建列表时会调用计算绑定(bind)方法，每个项目调用一次。

然后当我更新项目时，如下所示:

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

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

Polymer Data Binding entry in the developer's guide关于计算绑定(bind)有这样的说法:

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]

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

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

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

Answer 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 子属性发生更改时触发计算绑定(bind)，您可以在绑定(bind)中使用 ticket.*:

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

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

这是一个jsbin .