聚合物查询选择器在 dom-repeat 中找不到元素

Question

目标：

我正在尝试在dom-repeat元素内选择一个div。

下面的代码包含我要选择的div。 id="med[[index]]"

法典：

<div class="card">
    <h1>Medicijn overzicht:</h1>
    <template is="dom-repeat" items="{{employees}}">
        <div class="inner-card" id="[[index]]">
        <div><span><b>{{item.first}}</b></span> <span>{{item.last}}</span>mg<br><span>{{item.stuks}}</span> stuks</div>
        <div id="med[[index]]" style="display:none"><br><br><br><br><br>Goed verhaal</div>
        </div>
    </template>
</div>

问题：

这里的目标是在单击父元素时使div 展开，但是从单击函数中调用 querySelect 时似乎找不到该元素。当使用静态名称在函数顶部进行此搜索时，它发现它很好。

            attached:function(){
            this.async(function() {
                var cards = Polymer.dom(this.root).querySelectorAll(".inner-card");
                var test = Polymer.dom(this.root).querySelector("#med0"); //Finds the element
                console.log(test);  // This is fine
                console.log("cards",cards);
                $(cards).click(function(evt){
                    var target= evt.currentTarget;
                    var tindex = target.id;
                    var targetDiv = Polymer.dom(this.root).querySelector("#med"+tindex); //Doesn't find it.
                    console.log("#med"+tindex)
                    console.log(targetDiv);
                    $(targetDiv).slideDown("slow");
                    console.log("trigger"+tindex);
                });
            });
       }

可能只是我误解了它是如何工作的，我对此很陌生。

谁能告诉我我在这里做错了什么？提前谢谢。

Answer 1

另一种解决方案是在函数结束后添加.bind(this)。我在无法使用 ES6 的旧项目中使用它。使用.bind(this)似乎更"干净">

在您的情况下：

     $(cards).click(function(evt){
            var target= evt.currentTarget;
            var tindex = target.id;
            var targetDiv = Polymer.dom(this.root).querySelector("#med"+tindex); //Doesn't find it.
            console.log("#med"+tindex)
            console.log(targetDiv);
            $(targetDiv).slideDown("slow");
            console.log("trigger"+tindex);
     }.bind(this));

Answer 2

单击处理程序中对this.root的引用与上面引用的引用不同。 root可能不存在于点击处理程序的this上下文中 - 它肯定与上面的this.root不同，因为该this指的是全局this。

您可能希望保存this或this.root以便在点击处理程序中使用：

this.async(function() {
   var cards = Polymer.dom(this.root).querySelectorAll(".inner-card");
   var test = Polymer.dom(this.root).querySelector("#med0");
   var root_root=this.root; // **ADD THIS**
   $(cards).click(function(evt){
      var target= evt.currentTarget;
      var tindex = target.id;
      var targetDiv = Polymer.dom(root_root).querySelector("#med"+tindex); // **CHANGE THIS**
      $(targetDiv).slideDown("slow");
      console.log("trigger"+tindex);
   });
});

或者，如果您可以使用 ES6 的箭头函数，则只需将单击处理程序转换为箭头函数即可更轻松地解决此问题，

$(cards).click((evt) => { …

这将使用箭头函数周围上下文中的this。