gpt4 book ai didi

polymer - 在 Polymer 1.0 中动态注入(inject)模板

转载 作者:行者123 更新时间:2023-12-02 14:22:46 25 4
gpt4 key购买 nike

我正在尝试注入(inject)并显示 <template> 正确的方式进入 Polymer Web 应用程序,但我在使用它时遇到了一些困难。 (……或者也许我误解了 1.0 文档?)

documentation about manipulation the DOM说:

Polymer provides a custom API for manipulating DOM such that local DOM and light DOM trees are properly maintained. These methods and properties have the same signatures as their standard DOM equivalents, except that properties and methods that return a list of nodes return an Array, not a NodeList.

Note: All DOM manipulation must use this API, as opposed to DOM API directly on nodes.

所以我想我必须使用 Polymer.dom到处都有 API 来操作 DOM,这对我来说很有意义,因为这样 Polymer 就可以与生成的 shady DOM 保持同步。否DOM.appendChild() ,而不是 Polymer.dom().appendChild() 。直接操作 shady 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 中并更改 reftemplate#contentcontent …如果更改 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) ?但我又尝试了一下,还是不行。啊啊,这真是令人困惑。

最佳答案

如果我理解正确,并且您想将模板插入本地 dom(将其插入其他地方并没有真正意义),那么它就是 Polymer.dom(this.root).appendChild

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

关于polymer - 在 Polymer 1.0 中动态注入(inject)模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30955454/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com