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 .