Question

我正在尝试运行以下程序（灵感来自示例project）。我希望访问loveCount_{{post.uid}} span元素，并在点击收藏夹时将其递增1。

<post-card
      favorite="{{post.favorite}}"
      on-favorite-tap="{{handleFavorite}}"
      hidden?="{{show == 'favorites' && !post.favorite}}">
      <img src="../images/{{post.avatar}}.svg" width="70" height="70">
      <h2>{{post.username}}</h2>
      <p>{{post.text}}</p>
      <p class="loveCount"><span id="loveCount_{{post.uid}}">{{post.loveCount}}</span></p>
</post-card>

<script>
 Polymer({
  handleFavorite: function(event, detail, sender) {
  var post = sender.templateInstance.model.post;

  if(post.favorite) {
    //hardcoding uid = '1', just to check if its working, but its not!
    console.log(this.$.loveCount_1);
  }
  this.$.service.setFavorite(post.uid, post.favorite);
  }
 });

</script>

知道我做错了吗？

Answer 1

我认为你以错误的方式思考它;正如您在评论中所建议的，数据绑定就是答案。

您可以将数据绑定连接在一起的几个不同的地方;一个非常简单的方法是在每个loveCount上定义<post-card>属性，在<template> <post-card>中显示该值，然后递增{{1}中的值处理程序。

您可以在this gist的第50,55和63行看到更改。

更多信息与示例一致，您可能希望将favoriteTapped定义为每个项目的属性，即loveCount文件被读入，或处理显示posts.json内的loveCount <post-list>处的模板。有很多方法可以构建东西，这实际上取决于你的用例。

自动节点查找不起作用

1 个答案: