polymer - 无法选择 "auto-binding"模板内的元素

Question

我已经创建了一些自定义元素，现在正在为它们编写测试。

我想使用"auto-binding"因为我有很多属性需要在我的元素之间绑定(bind)。

不幸的是，我无法查询模板内的任何元素。

这是一些代码。

    <template id="root" is="auto-binding">
        <dalilak-data-service id="dds" regions="{{regions}}"></dalilak-data-service>

        <dalilak-regions-handler id="drh" regions="{{regions}}" flattendedRegions="{{flattendRegions}}" descendantsRegionNames="{{descendantsRegionNames}}" regionsByNameId="{{regionsByNameId}}"></dalilak-regions-handler>

    </template>

在测试脚本中我尝试了以下操作

   drh =  document.querySelector('#drh');
   suite('dalilak-regions-handler', function() {
        test('handler initialized', function() {
            assert.ok(drh);
        });
   });

也尝试过这个:

   drh =  document.querySelector('* /deep/ #drh');  // or '#root /deep/ #drh'     
   suite('dalilak-regions-handler', function() {
        test('handler initialized', function() {
            assert.ok(drh);
        });
   });

但是它们都不起作用。

注意没有模板我可以查询我的自定义元素。

Answer 1

自动绑定(bind)模板异步标记，我希望您的问题是您需要等待模板标记才能查询元素。

发生这种情况时，模板会触发 template-bound 事件，因此您可以使用如下代码:

addEventListener('template-bound', function() {
   drh =  document.querySelector('#drh');
   ...
});

当然，这意味着您的测试基础设施需要了解如何处理异步，这可能是一个问题。