Polymerでテンプレートの更新を強制するにはどうすればいいですか？

Question

ポリマーのdom-repeatテンプレートの既存のアイテムの変更をどのように表示することができますか？

私は本当に私が考えることができたと私はポリマーのドキュメントやWebで見つけることができました。しかし、何も動作しません。下の小さなリストを使用して、変更ボタンをクリックするとリスト内の1つのエントリを別の値に変更しようとするHTMLページがあります。しかし、変更ボタンの隣のリスト内の項目を変更する唯一のものは、コメントアウトされた行です。他のすべての行はそれを試しますが、失敗します。

私は、テンプレートの再レンダリングは時間がかかる作業であり、必要な時にポリマーが可能な限りそれを回避しようとしている場合にのみ行うべきであることを理解しています。しかし、なぜ私は自分の世界の神のコードの視点から^^）を目的にレンダリングすることができないのでしょうか？

完全な新しいオブジェクトを作成し、古いアイテムをリストから削除し、新しいオブジェクトを挿入する方法（これはコメント行が何をするのか）は回避策ですが、アイテムが多くなると複雑で、表示されていないプロパティや配列を持っています。

何が欠けていますか？私は何を試しませんでしたか？誰かが私のような（私の視点から）シンプルで非常に共通の課題を達成するために何ができるか教えていただけたら非常にうれしいです。

EDIT（解決済み）： Tomasz Pluskiewiczのソリューションが一部成功しました。私の現在の問題を示すためにコードを更新しました。項目の名前はメソッド形式（...）を使用してバインドされます。ボタンがクリックされると、アイテムはリストから削除されます。これはうまくいく。リストの最後の項目を削除すると、リストの新しい最後の項目の名前が「最後」になります。これは、名前がプロパティ名に直接バインドされている場合にも機能します。しかし、もし私が名前のいくつかのフォーマットをしたければ（例えば＃で囲む）、このアイテムの表示は更新されません。

EDIT2（部分的に解決された）： 次の例は、値を表示するために呼び出されたメソッド内の値が変更されたときに発生します。この例では、変更ボタンが何度もクリックされた場合に表示されます。内部カウンターが増加し、対応するテキストにこの値が表示されます。しかし、これはカウンターの最初の変更にのみ当てはまります。その後のクリックでは、表示が再び変更されることはありません。ディスプレイには、最初のクリック後のカウンタの値が表示されます。しかし、別の変更ボタンがクリックされた場合、このボタンの前のテキストには増加したカウンタ値が表示されます。しかし、一度だけ。また、それ以降のクリックでの変更は表示されません。 notifyPathメソッドは、値が変更されたかどうかを確認するようですが、値を表示するために使用されるメソッドの内部では、別の方法でデータが表示されるように変更されている可能性があります。

この例では部分的な解決策が含まれていました。呼び出されたメソッドに、メソッド内の何かが変更されたときに変更されるパラメータを持つ場合は、更新が実行されます。これは、パラメータdisplayEnforcer-format（item.name、displayEnforcer）でバインドされている2番目の変数で確認できます。この変数は、カウンタが変更されるたびにランダムな値に設定されます。これにより、ディスプレイの更新がトリガーされます。

しかし、これは本当に奇妙な解決策であり、必要ではありません。誰かがこの問題に対するより良い解決策を持っているなら、それは素晴らしいことでしょう。

<link rel="import" href="components/bower_components/polymer/polymer.html"> 
<link rel="import" href="components/bower_components/paper-button/paper-button.html"> 
<dom-module id="polymer-test"> 
    <template> 
    <table> 
     <template id="tpl" is="dom-repeat" items="{{list}}"> 
     <tr> 
      <td>{{item.id}} - {{format(item.name)}}- {{format(item.name,displayEnforcer)}}</td> 
      <td><paper-button raised on-tap="tapDelete">delete</paper-button></td> 
      <td><paper-button raised on-tap="tapChange">change</paper-button></td> 
     </tr> 
     </template> 
    </table> 
    </template> 
</dom-module> 
<script> 
    Polymer(
    { 
    is: "polymer-test", 
    properties: 
    { 
     count: {type: Number, value:0} 
    ,list: {type: Array, value: [{id:0,name:"First"} 
           ,{id:1,name:"Second"} 
           ,{id:2,name:"Third"} 
           ,{id:3,name:"Fourth"} 
           ,{id:4,name:"Fifth"} 
           ,{id:5,name:"Last"} 
           ]} 
    ,displayEnforcer: {type:Number,value:Math.random()} 
    }, 
    format: function(name,dummy) 
    { 
     return "#" + name + " - " + this.count + "#"; 
    }, 
    tapChange: function(e) 
    { 
     this.count++; 
     this.displayEnforcer = Math.random(); 
     this.notifyPath("list." + (e.model.index) + ".name","changed"); 
    }, 
    tapDelete: function(e) 
    { 
     if(this.list.length == 1) 
     return; 
     this.splice("list",e.model.index,1); 
     if(this.list.length > 0) 
     this.list[this.list.length-1].name = "Last"; 
     this.notifyPath("list." + (this.list.length-1) + ".name",this.list[this.list.length-1].name); 
    } 
    }); 
</script> 

Answer 1

あなたは、単一のリスト要素のプロパティの結合をリフレッシュするためにnotifyPathを使用することができます。

tapChange: function(e) { 
    this.notifyPath('list.' + e.model.index + '.name', 'changed'); 
} 

参照：https://github.com/Polymer/polymer/issues/2068#issuecomment-120767748

---

全体リピータはなく、単に更新を再レンダリングされません。この方法必要なデータバインドノード

EDIT

それは、アイテムの名前です通知パスを使用していないので、あなたのformat機能が更新取得されません。要素を削除すると、実際の項目が変更されても、レンダリングされたリピータ内のその要素のインデックスは変更されません。

<td>{{item.id}} - {{format(index, item.name)}}</td>

：あなたは5番目の要素を削除するときは、そのパスを通知したときに他の言葉では、インデックス4は、それがリフレッシュされるように、あなたが formatコールに item.nameを追加することができます回避策として、まだ4

です

この例では、その値を使用する必要はありません。バインディングが再評価されれば十分です。