javascript - 获取模板 if 语句内的节点

Question

在我的基于 polymer 的网站上，我创建了一个自定义元素，通过 ajax 加载数据。根据数据加载的当前状态，我创建了一些 <template if="{{}}">元素来显示正确的内容。它看起来是这样的:

<polymer-element name="modules-item" attributes="moduleID categories">
  <template >
    <service-get-module module="{{module}}" moduleID="{{moduleID}}"></service-get-module>
    <paper-shadow z="1">
        <core-toolbar>
          <span flex  hero-id="title" hero itemprop="name">{{module.title}}</span>
        </core-toolbar>
    </paper-shadow>
    <paper-progress id="moduleLoadingProgress"></paper-progress>
    <template if="{{moduleID == null}}">
        <p>Modul not available</p>
    </template>
    <template if="{{moduleID != null && module == null}}">
        <p>Module is loading...</p>
    </template>
    <template if="{{moduleID != null && module != null}}">
        <div id="moduleContainer">
        <!-- Content //-->
        </div>
   <template>
 </template>
<script>
  Polymer({
    module: null,
    moduleID: null,
    ready: function(){
        console.log(this.$.moduleContainer);
    }
</script>
</polymer-element>

效果很好，但如果我尝试访问 <div id="moduleContainer">我不明白......我刚刚读了很多帖子，但没有得到任何解决方案。有人可以帮助我吗？ :)

以下是实时网站的链接:http://www.test.gruppenstunde.eu/

更新

在使用 polymer 一段时间后，我发现使用 hidden? 更容易-属性，随意隐藏内容。示例:

<div hidden?="{{moduleID != null}}">Module not available</div>

Answer 1

您无法访问<template if="{{..}}">内的元素或<template repeat="{{..}}"> (动态创建)使用 $访问器。您需要使用querySelector(...)仅当 if 表达式计算结果为 true(元素实际创建/显示)时，您才可以使用该字段