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

我正在尝试在我创建的聚合物元素中注入标签。有了这个，我打算能够控制元素中的区域（在我的情况下，我的目标是能够传入模板，然后在模型中为每个元素加盖模板）。如何通过引用元素之外的模板来绑定模板

所以我准备的，我想怎么做一个小例子：

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

这工作我需要的方式。但是，如果我坚持标签成聚合物元素本身这个停止工作：

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

我怎样才能实现第一个例子在第二种情况下的效果？

问候和感谢很多提前，

来源

2014-08-30 Ablu

http://jsbin.com/wukaloqacedo/1/这类作品，但它再次显示my-test元素的输出。 – user1259201 2014-08-31 00:06:45

我现在找到了一种简单的情况下做到这一点：

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

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

虽然这工作得很好这不幸的是没有帮助我在我的计划使用情况，因为我不想重复一个<table>元素那里，像里面的模板：

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

如果<content>不起作用应该包含例如<tr>标签。

因此，我会继续尝试找到一种方法，允许将shadowroot中的<template>绑定到<template>之外。但我仍然在回答这个问题，因为它可能是更简单情况的替代方案。

来源

2014-08-31 09:31:37 Ablu

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

这把小提琴的作品。这并不直接回答你的问题，但它解释了会发生什么。

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

可能的解决方案

，你可以采用模板，并将其添加到“我的元素”的shadowRoot（在某种程度上模板承认其参与了shadowRoot但没有其他人）喜欢这里Using template defined in light dom inside a Polymer element（动态模板创建）

或者用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>

这两种方法不“真”回答你的问题，但他们对这种情况可以接受workarouns。

我也尝试在javascript中设置模板的ref_属性，但没有成功......并且对私有成员进行戳动并不是一个很好的做法。

来源

2014-12-21 17:34:20 Tobi

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

回答

相关问题