聚合物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数据绑定阵列

回答

相关问题