聚合物計算綁定不會在更新時重新計算

Question

我有一個生成表格行的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 條目是關於計算綁定的：

[...] 屬性綁定到computeFullName的返回值，該值在第一次或最后一次更改時重新計算。 [ first和last是computeFullName的聲明參數]

因此，假設計算綁定不知道對象值、其amount屬性以及其他邏輯如何使用它來更新available_tickets屬性之間的相關性，我嘗試添加帶有完整更新對象的notifyPath命令，例如這個：

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

但這似乎沒有任何效果。 我錯過了什么？

Answer 1

我懷疑notifyPath沒有在您的情況下觸發更新，因為它的臟檢查。 也就是說， 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 。