0

我有一个非常简单的项目：

app/
    parent.html
    child.html
index.html

我尝试将数据从父母传递给孩子，然后在 Polymer() 中获取它们：

索引.html

<!DOCTYPE html>
<html>
  <head>
    <link rel="import" href="bower_components/polymer/polymer.html">
    <link rel="import" href="app/parent.html"/>
  </head>
  <body>
    <h1>Hello Paul!</h1>
    <x-comphost></x-comphost>
  </body>
</html>

应用程序/parent.html

<link rel="import" href="child.html"/>
<dom-module id="x-comphost" noscript>
  <template>
    <h4>Hello, man!</h4>
    <p>I'm seeking a child</p>
    <x-child accessible-policies="{{policies}}"></x-child>
  </template>
  <script>
    Polymer({
      is: "x-comphost",
      ready: function(){
        this.policies = ['Hospital', 'Dental', 'Travel'];
      }
    });
  </script>
</dom-module>

应用程序/child.html

<dom-module id="x-child" noscript>
    <template>
        [[accessiblePolicies]]
        <h5>Hello again!</h5>
        <p>Remember me?</p>
    </template>
    <script>
        Polymer({
            is: "x-child",
            properties: {},
            ready: function () {
                console.log('thisData', this.__data__);
            }
        });
    </script>
</dom-module>

问题在于，Polymerthis.__data__仅看到从主机传输的数据是否像上面一样隐式声明，在模板打开器标记旁边。如果我从那里删除它就看不到它。所以它看起来像一个把戏。我不想将该数据放在模板中，我想在Polymer函数中使用它。但我不知道如何正确地实现这一点，没有任何技巧的正确方法是什么。我相信有人知道。

4

2 回答 2

1

您可以通过 javascript 接口传递数据，只需将以下内容添加到您的父 ( x-comphost) 实现中：

Polymer({
  is: "x-comphost",
  ready: function(){
    this.policies = ['Hospital', 'Dental', 'Travel'];

    /* Query shadow DOM for the x-child element */
    var childEl = Polymer.dom(this.root).querySelector('x-child');

    childEl.accessiblePolicies = this.policies;
  }
});
于 2016-09-14T14:52:13.053 回答
0

在属性对象中配置策略而不是在父对象中配置就绪周期，并根据父属性名称在子对象中创建属性，如下代码中所述

父.html

聚合物（{ 是：“x-comphost”，

  properties :{

    policies : {
      type : Array,
      value : ['Hospital', 'Dental', 'Travel']
    }
  },
  ready: function(){
  //  this.policies = ['Hospital', 'Dental', 'Travel'];

  }
});

Child.html

聚合物（{ 是：“x-child”，

        properties: {
            accessiblePolicies : {
                type : Array,
                value : []                }

        },
        ready: function () {
            console.log('thisData', this.accessiblePolicies);
        }
    });
于 2016-09-18T19:59:41.923 回答