自动绑定模板中两个自定义元素的已发布属性之间的数据绑定 - Polymer 1.0答案

【问题标题】：Data binding between published properties of two custom elements inside an auto binding template - Polymer 1.0自动绑定模板中两个自定义元素的已发布属性之间的数据绑定 - Polymer 1.0
【发布时间】：2015-06-02 11:24:45
【问题描述】：

问题：我的 index.html 主页面中有一个自动绑定模板。在模板中，我使用了两个自定义元素。一个元素是某些数据的生产者，另一个元素是该数据的消费者。这些自定义元素公开发布/声明的属性以供彼此使用和绑定。我可以很容易地在 Polymer 0.5 中做到这一点（如下所示的示例）。如何在 Polymer 1.0 中做同样的事情？

我过去在 Polymer 0.5 中的表现如何？ 在 Polymer 0.5 中，我曾经使用花括号语法在两个自定义元素的已发布属性之间进行数据绑定，然后在其中使用自动节点查找概念直接绑定到其他元素的已发布属性。下面是一个例子，

<template is="auto-binding">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ $.my_navigation.selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>

我在 Polymer 1.0 中尝试了类似的方法，如下例所示

<template is="dom-bind">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ $.my_navigation.selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>

但它会抛出一个错误：-

未捕获的类型错误：无法读取未定义的属性“$”

【问题讨论】：

标签： polymer web-component

【解决方案1】：

您不能在 Polymer 1.0 的模板内进行$.* 绑定。相反，要么重构，要么使用计算函数。

在您的情况下，由于 selectedLabel 和 toolbartitle 共享相同的值，因此最好将它们简单地绑定到相同的属性。

另外，声明式传入（通过元素标签）的属性名称需要序列化，所以selectedLabel变成selected-label。

<body>
  ...
  <template id="tpl" is="dom-bind">
    <my-navigation selected-label="{{myLabel}}" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{myLabel}}" id="my_scaffold"></my-scaffold>
  </template>

  <script>
    ...
    window.addEventListener("WebComponentsReady", function (e) {
      document.querySelector("#tpl").myLabel = "Home";
      ...
    });
    ...
  </script>
</body>

【讨论】：

【解决方案2】：

可能有更好的方法来做到这一点，但你可以试试这个：

<body>
<template id="app" is="dom-bind">
    <my-navigation selectedLabel="Home" id="my_navigation"></my-navigation>
    <my-scaffold toolbartitle="{{ selectedLabel }}" id="my_scaffold"></my-scaffold>
</template>
<script>
        var app = document.querySelector('#app');

        app.addEventListener('template-bound', function () {
            console.log('Our app is ready to rock!');
        });

        window.addEventListener('WebComponentsReady', function () {
            document.querySelector('body').removeAttribute('unresolved');

            var my-navigation = document.querySelector('my-navigation');

            // This will add the variable to the 'app' context (template)
            app.selectedLabel = my-navigation.selectedLabel;
        });
</script>
</body>

【讨论】：

不能这样做，因为<my-navigation> 中对selectedLabel 的更改不会传播到<my-scaffold>。还。属性必须被序列化。
我不认为他想传播更改，对我来说这是一个简单的静态字符串属性