ポリマー2.0データバインディングアレイ

Question

私はFirebaseデータベースに保存した対応するパーティーの下にすべての候補者のリストを表示しようとしています。私はPolymer 2.0 Starter-Kitを使用しています。

ここでは、コードです：

_checkParties() { 
     var candidate_list = [] 
     firebase.database().ref("/candidates/"+this.party.$key).once("value", function(snapshot) { 
      snapshot.forEach(function(snap) { 
       var data = {"key": snap.key, "data": snap.val()} 

       var results = Object.keys(data["data"]).map(function(key) { 
       return { 
        name: key, 
        value: data["data"][key], 
        key: data["key"] 
       }; 
       }) 
       candidate_list.push(results[0]) 
      }) 
     }) 
     this.candidates = candidate_list; 
    } 

は基本的に私は私のfirebaseからそのパスの子を照会していますが、その後、私のvar candidate_listにそれらを追加。クエリ以外では、this.candidatesを配列var candidate_listに設定しました。

ここに私のテンプレートのコードです：

<template is="dom-repeat" items="{{ candidates }}" as="candidate"> 
     <div class="card"> 
      <p>[[candidates]]</p> 
      <h3>[[candidate.name]] - [[candidate.value]]</h3> 
      <paper-button raised style="color: yellow; background-color: black;" on-tap="_castVote">Vote</paper-button> 
     </div> 
    </template> 

私の静的プロパティへのコード：

candidates: { 
      type: Array, 
      value: [] 
      } 

その後、私のコンストラクタ：

constructor() { 
    super(); 
    } 

私は、コンストラクタにこれを追加してみましたが、しかしそれは何にも影響しないようです：

constructor() { 
    super(); 
    this.candidates = []; 
    } 

結果は、テンプレートdom-repeatのカードがすべての候補を表示することになります。代わりに私は何も表示されていない取得しています。 しかし、私はconsole.log私は私のすべての候補者を見ることができた。

Answer 1

私はあなたの_checkPartiesが呼ばれている場所を確認していないが、ポリマーは、あなたが候補者arrayを更新することを認識していないように聞こえます。

私は最初の試みは、hereと記載されているように、更新の通知を確実にするために、setメソッドを使うことができると思います。つまり、メソッド内の最後のステートメントを置き換えることになります。代わりに

this.candidates = candidate_list; 

のあなたは

this.set('candidates', candidate_list); 

を持っているでしょう、あなたがやっている何のために非常に適しのようです別のオプションは、計算されたプロパティとして候補者のリストを持っているだろう。だから、あなたは自分のプロパティ定義に'computed'キーを追加します。

candidates: { 
    type: Array, 
    value: [], 
    computed: '_checkParties', 
} 

とあなたの方法であなたの代わりにプロパティをoverwrittingのリストを返すために持っているので、

return candidate_list; 

の代わりに、同じでしょうが上記の行。