Question

<dom-module id="element-1">
    <template>
        <input type="text" value={{title}}>
    </template>
    <script>
        Polymer({
            properties: {
                title: {type: String}
            }
        })
    </script>
</dom-module>


<dom-module id="element-2">
    <template>
        <element-1></element-1> // Added dynamically using javascript.
    </template>
    <script>
        Polymer({
            properties: {
                property_1: {type:String}
            }, 
            // Here, I can access property_1 by this.property_1
            // How to get the property of element-1(title) here?
        })
    </script>
</dom-module>

所以，基本上，我有一个组件（元素-2）。在该组件内部，我动态添加另一个元素（element-1）。现在，我如何从元素-2中读取元素-1的属性？

任何帮助将不胜感激。

Answer 1

Polymer有instance method来查询其本地DOM：

$$(selector)。返回此元素的本地DOM中与selector匹配的第一个节点。

使用此方法，您可以使用this.$$('element-1').title中的<element-2>。

<head>
  <base href="https://polygit.org/polymer+1.5.0/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link rel="import" href="polymer/polymer.html">
</head>
<body>
  <element-2></element-2>

  <dom-module id="element-1">
    <template>
      <span>{{title}}</span>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'element-1',
          properties : {
            title: {
              type: String,
              value: "Hello world!"
            }
          }
        });
      });
    </script>
  </dom-module>
  
  <dom-module id="element-2">
    <template>
      <div id="container"></div>
    </template>
    <script>
      HTMLImports.whenReady(function() {
        Polymer({
          is: 'element-2',
          addElement1: function() {
            var e1 = document.createElement('element-1');
            this.$.container.appendChild(e1);
          },
          ready: function() {
            this.addElement1();

            var e1ref = this.$$('element-1');
            console.log("this.$$('element-1').title:", e1ref.title);
          }
        });
      });
    </script>
  </dom-module>
</body>

^codepen

PolymerJS 1.0：如何获取动态创建的组件的属性？

1 个答案: