在Polymer 1.0中动态注入模板

Question

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

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的template#content到content ......如果改变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

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

编辑：或者Polymer.dom(this)做的事情，我不需要调用Polymer.dom(app) ？ 但同样，我尝试了它，它将无法正常工作。 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 个解决方案

解决方案1
2 已采纳 2015-09-24 06:26:47

在Polymer 1.0中动态注入模板

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-09-24 06:26:47

解决方案1
2 已采纳 2015-09-24 06:26:47