Question

我正在尝试将标签注入我正在创建的聚合物元素中。有了这个，我计划能够控制元素中的区域（在我的情况下，我的目标是能够传入一个模板，然后为模型中的每个元素标记出来）。

所以我准备了一个我想做的小例子：

http://jsbin.com/wofokanafidu/1/edit

这就像我需要它一样。但是，如果我将标签粘贴到聚合物元件本身，这将停止工作：

http://jsbin.com/votihiqozusa/1/edit

如何在第二种情况下实现第一个例子的效果？

提前问候和感谢，

Answer 1

我现在找到了一种方法来处理简单的情况：

http://jsbin.com/xexusuhovuka/1/edit

这使用了<content>插入点。所以我只需要为模板设置模型。

虽然这很好用，但遗憾的是它在我计划的用例中没有帮助我，因为我想在那里重复<table>元素内的模板，例如：

<table>
    <table>
        <th>Heading1</th>
        <content></content>
    </table>
</table>

如果<content>应包含<tr>标记，则

无效。

因此，我将继续尝试找到一种方法，将阴影根中的<template>绑定到其外的<template>。但我仍然认为这是可能的答案，因为它可能是更容易处理的替代方案。

Answer 2

http://jsbin.com/zadejogide/1/edit?html,output

这个小提琴奏效了。这并没有直接回答你的问题，但它解释了会发生什么。

如果将“my-element”嵌套到antoher元素中，该元素的Light DOM将隐藏在外部元素的阴影树中（在本例中为“my-test”），这意味着：模板标记无法找到它

可能的解决方案

你可以采用模板并将其附加到“my-element”的shadowRoot（在某种程度上，模板识别它参与的shadowRoot但没有其他人），例如Using template defined in light dom inside a Polymer element（动态模板创建）< / p>

或尝试使用is =“auto-binding”。

<polymer-element name="my-element">
    <template>
        <template id="template" is="auto-binding" ref="foo">
            should not get displayed
        </template>
    </template>
    <script>
        Polymer('my-element', {
          domReady: function() {
            var foo = this.querySelector('#foo');

            if(foo){
                this.shadowRoot.appendChild(foo);
            }
          }
        });
    </script>
</polymer-element>

这两种方法都没有“真正”回答你的问题，但对于这种情况，这些方法都是可以接受的。

我还尝试在javascript中设置模板的ref_属性但没有成功......并且对私有成员进行调查并不是一个好习惯。

如何通过引用元素外部的模板来绑定模板

2 个答案: