Question

我尝试将<template> 以正确的方式注入并显示在Polymer Webapp中，但我遇到了一些困难。（...或者我误解了1.0文档？）

documentation about manipulation the DOM说：

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

注意：所有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>

我可以将第二个小片段导入页面。

<template id="snippet">
  <p>Consectetur adipisici elit.</p>
</template>

此模板应替换/引用#content。所以，让我们开始。

导入代码段非常简单。我可以获取它并获取它的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
  ...

现在我想我必须将此附加到我的template#app，并将ref的{{1}}更改为template#content ...如果仍然支持更改content ？我该怎么做呢？无论我如何处理这个问题，我每次都会陷入困境。

ref

我看了几天几天，试图找到解决方案。它适用于标准DOM API，但我不认为这是正确的方法。如果有人可以解决我的困惑，那就太棒了。

编辑：或者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会这样做，我不需要致电Polymer.dom(this)？但是，我再次尝试了它并且它不会工作。 Aaargh，这太令人困惑了。

Answer 1

如果我理解正确并且您想将模板插入本地dom（将其插入其他地方并不合理）那么它就是Polymer.dom(this.root).appendChild。

从https://www.polymer-project.org/1.0/docs/devguide/local-dom.html#dom-api：为了插入/附加到自定义元素的本地dom，请使用this.root作为父元素。

在Polymer 1.0中动态注入模板

1 个答案: