Question

我在这里遇到了一些问题。我使用event.target.templateInstance.model.thing语法取得了一些成功，可以在重复的模板中获取属性的值，但我不断从这里的代码中找回undefined：

downloadFunction: function (e) {
  console.log("dl function clicked");
  //get particular id of thing
  var fu = e.target.templateInstance.model.s.soundId;
  console.log(fu);
  //^ returns "TypeError: Cannot read property 'soundId' of undefined"
}

我的重复模板就在这里：

<div layout horizontal wrap center center-justified>
  <template repeat="{{s in carddata}}">
    <sound-card image="{{s.imgurl}}"
                quotetext="{{s.quote}}"
                soundsrc="{{s.soundurl}}"
                soundref="{{s.soundId}}"
                downloadfunction="{{downloadFunction}}">
    </sound-card>
  </template>
</div>

carddata只是一个包含数据的数组。所有的值都生成得很好，所以我知道它不是我的数组的问题。我只是想知道我应该如何在重复模板中定位某些内容？我是在错误的时间打电话吗？或者我搞砸了templateInstance位的语法？

如果重要的话，我试图让它在使用Apache Cordova的Android 4.4 webView中运行。 4.4 webView似乎没有太多地享受shadowDOM。

谢谢！

编辑：在一些带有控制台日志的jiggery pokery之后，sender值似乎指的是我应用on-click="{{downloadFunction}}的div。这是我重复的模板，如果这提供了任何见解。

<div class="soundcard-container" vertical layout>
  //can't target this one either on WebView 4.4, works on ChromeOS
  <img src="{{image}}" on-tap="{{playAudio}}">
  <div class="soundcard-bottom-container" horizontal layout center justified>
  <span>{{quotetext}}</span>
  //I have an 'a' tag for desktop browsers and the div tag is targeting my Android/iOS
  //apps that I am exporting as a webView to using Apache Cordova. Webonly is hidden
  //at the point where I'm trying to get my downloadfunction to work.
  <a href="{{soundsrc}}" download="{{quotetext}}.m4a" class="webonly"></a>
  //console.log(sender) in my downloadfunction returns this div v
  <div on-tap="{{downloadfunction}}" class="mobileonly"></div>
</div>
//just a hidden audio thing for web
<div style="display: none">
  <audio id="{{soundref}}" src="{{soundsrc}}" controls preload="auto"></audio>
</div>
    </div>

edit2 一些控制台日志..

console.log(sender)和console.log(event.target)都是具有downloadFunction点击事件的div。不确定是否属于这种情况。

console.log(e.target.templateInstance.model)返回我的<sound-card>对象，我相信应该（？）

只是当我添加特定的.s.soundId时，它是未定义的。我不确定为什么它无法找到它。也许还有另一种方法可以获得特定的<sound-card>对象的特定soundId（或s.soundId）？ / p>

Answer 1

以下是使用templateInstance的工作示例，其中包括按动态ID选择：Plunk。至于你的代码，不知道它为什么不起作用。

handleEvent: function(e, detail, sender) {

  console.log('handleEvent');
  console.log(sender.id);

  //How to catch full_obj here, 
  //..as if first item is clicked:  full_obj = {"firstName":"John", "lastName":"Doe"}
  //console.log(e);
  console.log(e.target.templateInstance.model.item.firstName);
  //console.log(detail);
  //console.log(sender);

  this.instance_firstName = e.target.templateInstance.model.item.firstName;
  this.instance_lastName  = e.target.templateInstance.model.item.lastName;


  //Selecting by dynamic ID
  var clicked_element = this.shadowRoot.querySelector('#'+this.instance_firstName);
  console.log('Selecting');
  console.log(clicked_element);
  //var second_element = sender.templateInstance.model.querySelector('my-second-element');
  //var second_element = this.$.second_element;
}

编辑： Event handling and data binding Docs

Answer 2

我打赌你想要引用＆＃34;发件人＆＃34;事件 - 而不是e.target。请参阅https://www.polymer-project.org/0.5/docs/polymer/polymer.html#declarative-event-mapping处的inSender部分：

inSender：对声明处理程序的节点的引用。这是通常不同于inEvent.target（收到的最低节点） event）和inEvent.currentTarget（处理事件的组件），所以Polymer直接提供它。

这可能会解决它：

downloadFunction: function (e, detail, sender) {
  console.log("dl function clicked");
  //get particular id of thing
  var fu = sender.templateInstance.model.s.soundId;
  console.log(fu);
}

Answer 3

好吧，我能够以不同的方式适应这种情况。我无法让e.target.templateInstance.model.s.soundId位工作，所以在我调用事件（event.target）的div上，我给它一个名为data-soundid的属性并传递给它来自我原始模板的{{soundref}}，然后我重复该模板，我只是简单地创建了一个函数：

downloady: function (e) {
  console.log(e.target.getAttribute('data-soundurl'));
}

塔达！很好的解决方案。感谢Eyal在之前的问题中向我提出这一建议。它就像一个魅力。： - ）

Polymer - 在重复模板中获取数据绑定属性值

3 个答案: