如何在相同的 "event" 中访问模板内容，因为它在 Polymer 中可见

Question

让我试着解决我的问题

<polymer-element name="my-element">
    <template>
        <template if="{{show}}">
            <my-other-element id="elementWithUnexposedInternals"></my-other-element>
        </template>
    </template>
    <script>
        Polymer({
            show: false,
            showChanged: function{
                this.$.elementWithUnexposedInternals.someProperty = true;
            }
        });
    </script>
</polymer-element>

我的其他元素似乎无法在 this.$ 行中访问，因为模板尚未呈现它。

如何解决这个 "order" 问题？

干杯

Answer 1

您可以在 'domReady' 事件侦听器中为 'show' 设置值。

Answer 2

其实你有两个问题。一个是元素尚未呈现，另一个是元素将 永远不会 添加到 this.$，它仅填充元素的 ]静态内容:

https://www.polymer-project.org/0.5/docs/polymer/polymer.html#automatic-node-finding

您可以通过添加静态容器并使用 querySelector 解决第二个问题：

<polymer-element name="my-element">
  <template>
    <div id="container>
      <template if="{{show}}">
        <my-other-element id="elementWithUnexposedInternals"></my-other-element>
      </template>
    </div>
  ...

var el = this.$.container.querySelector('#elementWithUnexposedInternals');

至于时机。在 Polymer 0.5 中，数据绑定更新发生在微任务定时（在当前事件处理程序之后，下一个事件处理之前）。如您所见，已更改的处理程序在数据绑定模板标记其内容之前被调用。

您应该可以通过使用 async 延迟访问元素来解决这个问题。结合这两个修复，您将获得：

        showChanged: function(){
          this.async(function() {
            var myEl = 
      this.$.container.querySelector("#elementWithUnexposedInternals");
            myEl.someProp = true;
          });
        },

setTimeout(function, 0); 也可能有效——您需要做的就是在事件循环中延迟一个循环。但是 async 在 Polymer 中更为惯用（另外，它调用绑定到自定义元素实例的 this 的回调，这很方便）。

这里的工作示例：http://jsbin.com/gicado/1/edit?html,output

如何在相同的 "event" 中访问模板内容，因为它在 Polymer 中可见

How do I access template content in the same "event" as it gets visible in Polymer

templates

polymer