Question

在完成Polymer的发卡后/列表后教程后，我正在制作一个基于这些元素的简单测验应用程序。我的汉字列表是5个汉字卡的集合：

<div layout vertical center>
    <template repeat="{{k in kanjiarray}}"><kanji-card>
    <h1>{{k.japan}}</h1>
    <h2>{{k.eigo}}</h2>
    </kanji-card></template>
</div>

汉字卡元素的肉看起来像这样：

  <content select="h1"></content>
  <content select="img"><img src="{{image}}"></content>
  <content select="h2"></content>

</div>
<div class="card-body">
<p>Can you identify this?</p> <br/>
    <label for="nameInput">Answer:</label>
<input id="answerInput" value="{{answer}}"
       placeholder="Enter answer...">
        <img id="go" on-click="{{buttonClick}}" src="{{go}}">

我的问题是，如何访问h2元素的内容？我想编写一个简短的Javascript函数，它将根据h2中的答案检查用户的输入。我已经浏览了一段时间，找不到适合我的解决方案，如果有人可以帮助我那将是很棒的。

Answer 1

我建议你在kanji元素中创建一个kanji-card属性，这就是数据绑定存在的原因，你不必处理DOM来获取数据。

所以：

<polymer-element name="kanji-card" attributes="kangi">
<template>
<!-- card template goes here -->
</template>
<script>
Polymer({
   created: function() {
       kangi = {};
   }
});
</script>
</polymer-element>

然后你可以使用它：

<div layout vertical center>
    <template repeat="{{k in kanjiarray}}">
    <kanji-card kanji="{{k}}">
    <h1>{{k.japan}}</h1>
    <h2>{{k.eigo}}</h2>
    </kanji-card></template>
</div>

Answer 2

总的来说，我可能会选择穆罕默德的答案。本教程中的明信片旨在展示如何在shadow DOM中使用合成，但它只是设计此组件的一种可能方式。因此，我将根据您希望逻辑生存的位置提供两种可能的问题解决方法：在父元素或卡元素中。

第一种方法：父母的逻辑

如果您希望父（kanji-list）元素管理逻辑，您可以按照教程的模型，让卡在用户选择答案时简单地触发事件。您可以在此处查看教程如何处理此类事件：

https://github.com/Polymer/polymer-tutorial/blob/master/finished/post-list.html#L35

在事件处理程序中，您要查找的值（插入H2的值）类似sender.templateInstance.model.k.eigo。

第二种方法：卡元素中的逻辑

如果您希望汉字卡管理逻辑，您可以使用数据绑定将数据填充到卡中。换句话说，有一个像这样的元素：

<polymer-element name="kanji-card" attributes="kanji">
  <template>
     <h1 id="nihongo">{{kanji.japan}}</h1>
     <img src="{{kanji.image}}">
     <h2 id="eigo">{{kanji.eigo}}</h2>

     ... (rest as before)
enter code here

如果以这种方式编写元素（请注意H2上的ID），您可以使用自动节点查找来检索答案：

var answer = this.$.eigo.textContent

最后：你问的问题的答案

最后，您的问题的字面答案：如果您想要检索H2的内容，它比它看起来更容易。在现有代码中，H2被添加为汉字卡的常规子项，因此您可以使用querySelector来获取元素。从您的buttonClick方法看起来像：

var answer = this.querySelector('h2').textContent;

访问Polymer中的内容值

2 个答案:

第一种方法：父母的逻辑

第二种方法：卡元素中的逻辑

最后：你问的问题的答案