srgg6701 srgg6701 - 2 months ago 13
Javascript Question

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.

Answer

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