如何与兄弟姐妹共享变量？

Question

我是 Polymer 的新手，所以请不要隐瞒任何信息！

我有一个标准格式的基本网页，我正在尝试弄清楚如何使用 #main 组件公开 #nav 组件变量 currentSelection，这取决于切换出正确模板的选择：

head
body
    div#nav
    div#main
    div#footer

我了解 Polymer 的封装方面，但我不了解胶水、事件系统和动态的不同实例化模式 HTML，特别是因为 Polymer 0.5 已被弃用。

<template is="dom-bind"> 是否真的呈现为好像它不是 <template>？我正在考虑将整个网站打包成一个，但我不确定这是个好主意。

Answer 1

为什么不制作您的 #nav 和 #main 自定义组件？这样你就可以像这样绑定到 currentSelection：

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

dom-bind 模板对于在主文档（即 index.html）中的元素之间进行绑定是必需的，因此您可以使用 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>

或者您可以将所有元素放在另一个自定义组件中，例如 my-app，绑定将在其中工作：

index.html

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

我的-app.html

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

如何与兄弟姐妹共享变量？

How to share variables with siblings?

html

shadow-dom

polymer

index.html

我的-app.html