Автоматический поиск узла не работает

#polymer

#полимер

Вопрос:

Я пытаюсь запустить следующую программу (вдохновленную примером проекта). Я хочу получить доступ к loveCount_{{post.uid}} элементу span и увеличивать его на единицу при каждом нажатии на избранное.

 <post-card
      favorite="{{post.favorite}}"
      on-favorite-tap="{{handleFavorite}}"
      hidden?="{{show == 'favorites' amp;amp; !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>

Есть идеи, где я делаю неправильно?

1. Нужно ли мне использовать привязку данных здесь?

2. Помимо ответа Джеффа, который является правильным способом решения вашей проблемы: с ShadowDOM нет необходимости вручную создавать уникальный идентификатор. Если у вас есть только один, span вы можете смело назвать его loveCount , потому что он инкапсулирован внутри этого экземпляра и не будет конфликтовать с любым другим post-card экземпляром

Ответ №1:

Я думаю, вы думаете об этом неправильно; как вы предлагаете в своем комментарии, привязка данных — это ответ.

Есть несколько разных мест, в которых вы могли бы объединить привязку данных; очень простым подходом было бы определить loveCount свойство для каждого <post-card> , отобразить это значение в <template> for <post-card> , а затем увеличить значение в favoriteTapped обработчике.

Вы можете увидеть изменения в строках 50, 55 и 63 этого gist.

В соответствии с примером, вы можете захотеть определить loveCount в качестве свойства каждого элемента posts.json файл, который считывается, или иметь дело с отображением loveCount из шаблона в <post-list> . Есть много способов структурировать вещи, и это действительно зависит от вашего варианта использования.