CODEWITHSUNDEEP
htmlpolymershadow-dom
neaumusic
neaumusic

Reputation: 10464

How to share variables with siblings?

I'm very new to Polymer, so please don't hold back any information!

I have a basic webpage with a standard format, and I'm trying to figure out how I can expose the #nav component variable currentSelection with the #main component, which depends on the selection for switching out the correct template:

head
body
    div#nav
    div#main
    div#footer

I understand the encapsulation aspect of Polymer, but I lack an understanding of the glue, eventing system, and different instantiation patterns for the dynamic HTML, especially since Polymer 0.5 is deprecated.

Does <template is="dom-bind"> actually render as if it weren't a <template>? I'm thinking to wrap the whole site in one, but I'm not sure that's a good idea.

Upvotes: 1

Views: 74

Answers (1)

Kable
Kable

Reputation: 1045

Why not make your #nav and #main custom components? That way you could bind to currentSelection like so:

<my-nav current-selection="{{currentSelection}}"></my-nav>
<my-main current-selection="[[currentSelection]]"></my-main>

The dom-bind template is necessary to make bindings work between elements in the main document (i.e index.html), so you could either use dom-bind:

<template is="dom-bind"> 
    <my-nav current-selection="{{currentSelection}}"></my-nav>
    <my-main current-selection="[[currentSelection]]"></my-main>
    <my-footer></my-footer>
</template>

Or you could put all of your elements in another custom component such as my-app in which the bindings will work:

index.html

<body>
    <my-app></my-app>
</body>

my-app.html

<template>
    <my-nav current-selection="{{currentSelection}}"></my-nav>
    <my-main current-selection="[[currentSelection]]"></my-main>
    <my-footer></my-footer>
</template>

Upvotes: 3

Related Questions