聚合物2.0數據綁定陣列

我試圖顯示在我的Firebase數據庫中存儲的相應方下的所有候選人列表。我正在使用Polymer 2.0 Starter-Kit。聚合物2.0數據綁定陣列

下面的代碼：

_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; 
    }

基本上我從我的火力點這條道路的孩子，然後附加他們我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我可以看到我所有的候選人。

來源

2017-09-24 Mikebarson

我不知道您的_checkParties被調用，但它聽起來像聚合物不知道你的候選人array更新。

我認爲第一次嘗試可能是使用set方法，以確保它被通知更新，如here所述。所以這意味着要替換方法中的最後一個語句。取而代之的

this.candidates = candidate_list;

你會

this.set('candidates', candidate_list);

另一種選擇，這似乎是非常適合你在做什麼是有候選人名單的計算性能。所以你只需添加到您的屬性定義的'computed'鍵：

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

，並在你的方法，你將不得不返回列表，而不是overwritting的屬性，因此

return candidate_list;

，而不是相同的如上所述。

來源

2017-09-25 07:52:56 mishu

感謝您的回答！我確實嘗試過'this.set（）'，但是'this'沒有被識別。我可以通過在循環外部執行'var self = this'來解決問題。我還沒有試過計算。性能更好？ 'calculate'還是'this.set'？ – Mikebarson

@Mikebarson所以你說你使用set方法來使它工作？順便說一句，如果你可以使用ES6，你可以使用箭頭函數語法來避免綁定'this'關鍵字，所以你不需要將你的範圍「緩存」到另一個變量中;當涉及到通過使用set方法設置列表的性能差異，而不是觀察者時，我不知道是否存在任何差異，只是使用計算屬性纔有意義，因爲這就是實際發生的情況。但我想你可以使用哪種方法最適合你。 – mishu

是的，我使用了set方法。所以在表現上沒有什麼區別，好吧。你能澄清一下ES6語法是什麼嗎？我對整個ES6系統的新系統頗爲陌生。這是這樣的嗎？ 'function（）=>'？ – Mikebarson

聚合物2.0數據綁定陣列

回答

相關問題