在Polymer 1.0中动态注入模板_Polymer_Polymer 1.0

在Polymer 1.0中动态注入模板

polymer

在Polymer 1.0中动态注入模板,polymer,polymer-1.0,Polymer,Polymer 1.0,我正试图以正确的方式将注入并显示到Polymer Webapp中，但我遇到了一些困难。（…或者我可能误解了1.0文档？）报告说： Polymer提供了一个用于操作DOM的自定义API，以便正确维护本地DOM和轻型DOM树。除了返回节点列表的属性和方法返回的是数组而不是节点列表之外，这些方法和属性与它们的标准DOM等价物具有相同的签名注意：所有DOM操作都必须使用此API，而不是直接在节点上使用DOM API 所以我想我必须到处使用Polymer.domAPI来操作dom，这对我来说很有意义，

我正试图以正确的方式将

注入并显示到Polymer Webapp中，但我遇到了一些困难。（…或者我可能误解了1.0文档？）

报告说：

Polymer提供了一个用于操作DOM的自定义API，以便正确维护本地DOM和轻型DOM树。除了返回节点列表的属性和方法返回的是数组而不是节点列表之外，这些方法和属性与它们的标准DOM等价物具有相同的签名

注意：所有DOM操作都必须使用此API，而不是直接在节点上使用DOM API

所以我想我必须到处使用

Polymer.dom

API来操作dom，这对我来说很有意义，因为这样Polymer可以与生成的shady dom保持同步。没有

DOM.appendChild（）

，而是

Polymer.DOM（）.appendChild（）

。直接操纵阴暗的DOM不是一个好主意……或者会吗

想象一个简单的页面结构：

<body>
  <template is="dom-bind" id="app">
    <main>
      <template is="dom-bind" id="content">
        <p>Lorem ipsum dolor sit amet.</p>
      </template>
    </main>
  </template>
</body>

现在我想我必须将其附加到我的

模板#应用程序

，并将

模板#内容

的

ref

更改为

内容

…如果仍然支持更改

ref

？我该怎么做呢？不管我怎么做，每次都会被卡住

var app = Polymer.dom(this).querySelector('#app'); // Works, is template#app
var app = document.querySelector('#app'); // Same result

Polymer.dom(app).appendChild(template); // will append it, but outside of the document fragment
Polymer.dom(app.root).appendChild(template); // won't do anything

Polymer.dom(app).querySelector('template'); // undefined
Polymer.dom(app.root).querySelector('template'); // undefined
app.querySelector('template'); // undefined

我花了好几个小时、好几天研究这个问题，试图找到一个解决办法。它与标准domapi一起工作，但我认为这不是正确的方法。如果有人能解决我的困惑，那就太好了

编辑：或将

Polymer.dom（此）

做它的事，我不需要调用

Polymer.dom（应用）

？但是，我又试了一次，结果还是不行。Aaargh，这太令人困惑了。

如果我理解正确，并且您想将模板插入本地dom（将其插入其他地方没有意义），那么它就是

Polymer.dom（this.root）.appendChild

From：为了插入/附加到自定义元素的本地dom中，请使用this.root作为父元素。

您的用例是什么？例如，您的

#snippet

不能是

标记，有什么原因吗？顺便说一句，我认为目前聚合物1.0中没有直接替代

ref

。此外，如果您试图强制将数据绑定模板插入DOM，您可能会运气不佳，因为它不受支持。我在Google I/O Webapp中看到过这个过程，它看起来非常干净。您只需在文档末尾附加一个模板，并将其引用到其他地方即可–砰，它就会显示出来。但是I/O Webapp使用v0.8（甚至v0.5？）。我认为我的问题/困惑是，新的shady DOM将网络组件置于Shadow DOM之外，我不知道在哪里以及如何操作它。对我来说，操纵原始DOM是合乎逻辑的，Polymer会保持shady DOM与之同步。但是使用

Polymer.dom（）

我将最终操纵shady dom，它感觉非常脏。请参阅。似乎只有在基本API可以更新以支持在实例时动态添加绑定时，才能添加模板引用支持。所以，我想这与为什么这相当困难有关。我的用例是将一个自定义模板从外部注入到一个复杂的迭代自定义元素中。我认为这很常见？设想一个元素执行db查询并呈现它。我想自定义格式。。我错过什么了吗？谢谢！我一直认为我需要将它添加到模板标记中，并将

保留为我的“shadydom根”。是的，现在将其插入到真正的dom根目录中对我来说也很有意义目前我不再使用聚合物，所以我无法测试它——但这似乎是一个合适的解决方案。

Polymer.Base.importHref('/snippet', function(e) {
  // on success: imported content is in e.target.import

  var template = Polymer.dom(e.target.import).querySelector('#snippet');
  // until here it works, `template` is the template from my snippet
  ...

var app = Polymer.dom(this).querySelector('#app'); // Works, is template#app
var app = document.querySelector('#app'); // Same result

Polymer.dom(app).appendChild(template); // will append it, but outside of the document fragment
Polymer.dom(app.root).appendChild(template); // won't do anything

Polymer.dom(app).querySelector('template'); // undefined
Polymer.dom(app.root).querySelector('template'); // undefined
app.querySelector('template'); // undefined