如何获得 Polymer Web 组件的组合 DOM？答案

【问题标题】：How to get composed DOM of Polymer Web Component?如何获得 Polymer Web 组件的组合 DOM？
【发布时间】：2015-03-04 16:02:22
【问题描述】：

我正在使用 Polymer 0.8 预览版。例如，我有以下组件：

<dom-module name="greeting-tag">
    <template>
        <ul>
            <template repeat="{{s in salutations}}">
                <li>{{s.what}}: <input type="text" value="{{s.who}}"></li>
            </template>
        </ul>
    </template>        
</dom-module>
<script>
    Polymer({
        is: 'greeting-tag',
        ready: function () {
            this.salutations = [
                {what: 'Hello', who: 'World'},
                {what: 'GoodBye', who: 'DOM APIs'}
            ];
        }
    });
</script>

是否有可能在组件生命周期的某个时刻获取组合的 DOM（作为 JS 对象或文本）？

对于上面的例子我想得到

<ul>
    <li>Hello: <input type="text" value="World"></li>
    <li>GoodBye: <input type="text" value="DOM APIs"></li>
</ul>

也就是说，我需要模板处理后的结果。

【问题讨论】：

旁注：无论您是否想使用未发布的 API，请保持最新：Polymer('greeting-tag', ... 现在应该是 Polymer({is: 'greeting-tag', ...。
谢谢。我更新了我的帖子。

标签： javascript html polymer web-component

【解决方案1】：

Polymer 0.8尚未发布。此外，the documentation draft 中明确指出，阵列通知处于高通量状态。

您提供的代码有一堆小故障：

dom-module 应由id 标识，而不是由name 标识。
template repeat 已消失。应该改用<template is='x-repeat' items="{{salutations}}">。由于数组反射还没有释放/冻结，我从下面的示例代码中删除了它。

把所有东西放在一起：

<dom-module id="greeting-tag">
  <template>
    <p>{{caption}}</p>
  </template>
</dom-module>

<script>
    Polymer({
        is: 'greeting-tag',
        properties: {
          caption: {
            type: String,
            reflect: true
          }
        },
        ready: function () {
          this.caption = 'Welcome here',
          console.log(this.innerHTML);
        }
    });
</script>

后者将打印：

//⇒ <p style-scope="greeting-tag">Welcome here</p>

AFAIK，目前还没有现成的方法可以对数组做同样的事情。

【讨论】：