Question

在我的基于聚合物的网站上，我创建了一个自定义元素，我通过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/

更新

使用聚合物工作一段时间后我发现，使用hidden? - 属性更容易隐藏隐藏内容。例如：

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

Answer 1

您无法使用<template if="{{..}}">访问者访问<template repeat="{{..}}">或$（动态创建）中的元素。你需要使用querySelector(...)，只有当if表达式的计算结果为true时才能使用该字段（实际创建/显示了该元素）

Answer 2

要访问该元素，您可以将该模板放在div中，并为div赋予一个id。

<div id="mod">
  <template if="{{moduleID != null && module != null}}">
    <div id="moduleContainer">
    <!-- Content //-->
    </div>
  <template>
</div>

然后你可以

var el = this.$.mod.querySelector("#moduleContainer");

在模板if语句中获取节点

2 个答案: