Polymer: can't get this.__data__ passing in from host

问题

I have a very simple project:

app/
    parent.html
    child.html
index.html

I try to pass data from parent to child and then get them within Polymer():

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

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

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

The trouble is that Polymer sees this.__data__ only if data being transmitted from host is declared implicitly like above, next to template opener tag. If I remove it from there it can't see it. So it looks like a trick. I don't want to place that data within template, I want use it within the Polymer function. But I don't know how to achive this properly, what is the right way without any tricks. I believe somebody knows.

回答1:

You can pass the data via javascript interface, just add the following to your parent (x-comphost) implementation:

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;
  }
});

回答2:

Configure Policies in properties object instead of ready cycle in parent and as per Parent attribute name make properties in child , mentioned in below code

Parent.html

Polymer({ is: "x-comphost",

  properties :{

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

  }
});

Child.html

Polymer({ is: "x-child",

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

        },
        ready: function () {
            console.log('thisData', this.accessiblePolicies);
        }
    });

来源：https://stackoverflow.com/questions/39478627/polymer-cant-get-this-data-passing-in-from-host

标签

javascript

data-binding

polymer-1.0

dataflow

html-imports