Question

我正在使用Polymer 0.8-preview。例如，我有以下组件：

<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}}">代替。由于阵列反射尚未发布/冻结，我从下面的示例代码中删除了它。

把所有东西放在一起：

<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，还没有现成的方法来对数组做同样的事情。

如何获得Polymer Web Component的组合DOM？

1 个答案: