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

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>

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

任何帮助将不胜感激。

Answer 1

Polymer 有一个 instance method 查询它的本地 DOM:

$$(selector). Returns the first node in this element's local DOM that matches selector.

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

<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：如何获取动态创建组件的属性？

PolymerJS 1.0 : How to get properties of dynamically created component?

javascript

polymer

polymer-1.0