如何组成 DOM 的 Polymer Web Component？

Question

我正在使用 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>

换句话说，我需要模板处理后的结果。

Answer 1

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

您提供的代码有很多问题：

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

将所有内容放在一起：

<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>

据我所知，目前还没有现成的方法可以对数组执行相同的操作。

如何组成 DOM 的 Polymer Web Component？

How to get composed DOM of Polymer Web Component?

html

javascript

web-component

polymer