Polymer querySelector 在 dom-repeat 中找不到元素

Question

目标：

我正在尝试 select div 在 dom-repeat 元素中。

下面的代码包含div我想要select。 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

click-handler 中对 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。

Answer 2

另一种解决方案是在函数结束后添加 .bind(this)。我在不能使用 ES6 的旧项目中使用它。使用 .bind(this) 似乎更 'cleaner'

你的情况：

     $(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));

Polymer querySelector 在 dom-repeat 中找不到元素

Polymer querySelector can't find element in dom-repeat

javascript

jquery

jquery-selectors

polymer

目标：

代码：

问题：