聚合物 Dom 插入问题

Question

我使用的是 Polymer 1.0，但在检索和插入 dom 和显示时遇到问题。我可以让 HTML“li”打印到控制台，但我无法让聚合物呈现 HTML。

<example-app appjs="appJsFile.js">
<ul id="content">
//I want Content Here from Polymer
</ul>
</example-app>

appJsFile.js 被导入“example-app”。我有一个功能：

    for(var i in this.listData){
        var _ele = parent.document.createElement('li');
            _ele.innerHTML = this.listData[i].listDataName;
        return _ele;
    }

有什么想法吗？

Answer 1

您的代码没有显示您将元素添加到 DOM 的位置。 您创建元素，然后返回它。在您的情况下，这将在创建第一个 li 元素后离开该函数。 你把它退回到哪里？ parent.document.createElement('li') 只是创建一个元素。要显示它，您需要将其添加到 DOM（如 someElement.append(_ele)）。

应避免直接 DOM 操作。在您的情况下，您可以使用<template is="dom-repeat">。如果你想支持在 <ul> 中还不允许 <template> 的浏览器，你当然可以直接进行 DOM 操作。

出于性能原因，Polymer 1 不执行完整的 DOM API 填充。您必须使用 Polymer DOM API 来访问 DOM 元素以确保使用 polyfill。

在您的问题中形成代码，不清楚上下文是什么。 您是想将元素添加到 Polymer 元素的模板中，还是将其作为子元素添加，甚至添加到 Polymer 元素之外。

在你的情况下，这可能看起来像

var content = this.$.content; 
for(var i in this.listData) {
  var ele = parent.document.createElement('li');
  ele.innerHTML = this.listData[i].listDataName;
  content.append(_ele);
}