dom-if 模板中的聚合物 1.0 select 元素

Question

我似乎遇到了 Polymer 1.0 的一个常见问题：访问 dom-if 模板中的节点，但 none 的建议解决方案似乎适用于我的情况（？ !)..

这是一个简单的例子：

<link rel="import" href="../../bower_components/polymer/polymer.html">

<dom-module id="my-test">
  <template>
    <div>
      <template is="dom-if" if="{{show}}" id="tplId">
        <p id="message">hello</p>
      </template>
    </div>
    <a on-tap="tapEvent">click me!</a>
  </template>

  <script>
    (function() {
      'use strict';
      Polymer({
        is: 'my-test',
        show: false,
        ready: function() {
        },
        tapEvent: function() {
          // show the template
          this.show = true;

          // How may I access #message since the template is inhert ?

          // this finds the template by id
          console.log(Polymer.dom(tplId));

          // this won't find the #message element inside it
          console.log(Polymer.dom(tplId).querySelector('#message'))

          // this neither
          console.log(Polymer.dom(this.root).querySelector('#message'))

          // this neither
          console.log(Polymer.dom(this).querySelector('#message'))

          // this neither .. Should I even be using this.shadowRoot in 1.0?
          console.log(Polymer.dom(this.shadowRoot).querySelector('#message'))

          // this neither
          console.log(this.$$('#message'))

          // this cannot work because #message is not a statically created DOM element
          console.log(this.$.message)

        }
      });
    })();
  </script>
</dom-module>

我是 Polymer 的新手，我觉得解决方案可能就在我眼皮底下..?

Answer 1

如果这样

     // this neither
      console.log(this.$$('#message'))

不起作用那么您可能会在元素不存在时尝试查询该元素。当 show 为 false 时，<p id="message"> 元素根本不存在。如果你需要这个然后绑定到 hidden 而不是使用 dom-if

<p id="message" hidden$="{{show}}">hello</p>

然后

console.log(this.$.message);

同样有效。

dom-if 模板中的聚合物 1.0 select 元素

polymer 1.0 select element in dom-if template

polymer-1.0