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

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

polymer

自动绑定模板中两个自定义元素的已发布属性之间的数据绑定-Polymer 1.0,polymer,web-component,Polymer,Web Component,问题：我的主index.html页面中有一个自动绑定模板。在模板中，我使用了两个自定义元素。一个元素是某些数据的生产者，另一个元素是该数据的消费者。这些自定义元素公开已发布/声明的属性，以便彼此使用和绑定。在聚合物0.5中，我能够相当容易地做到这一点（下面显示了一个示例）。如何在聚合物1.0中实现同样的功能我以前在聚合物0.5中的表现如何？在Polymer 0.5中，我使用大括号语法在两个自定义元素的已发布属性之间进行数据绑定，然后在其中使用自动节点查找概念直接绑定到其他元素的已发布属性。下

问题：我的主index.html页面中有一个自动绑定模板。在模板中，我使用了两个自定义元素。一个元素是某些数据的生产者，另一个元素是该数据的消费者。这些自定义元素公开已发布/声明的属性，以便彼此使用和绑定。在聚合物0.5中，我能够相当容易地做到这一点（下面显示了一个示例）。如何在聚合物1.0中实现同样的功能

我以前在聚合物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>

但它抛出了一个错误：-

未捕获的TypeError:无法读取未定义的属性“$”

可能有更好的方法，但您可以尝试以下方法：

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


var-app=document.querySelector（“#app”）；
app.addEventListener（'template-bound'，函数（）{
log（'我们的应用程序准备好摇滚了！'）；
});
window.addEventListener（'WebComponentsReady'，函数（）{
document.querySelector（'body'）。removeAttribute（'unresolved'）；
var my-navigation=document.querySelector（'my-navigation'）；
//这将把变量添加到“应用程序”上下文（模板）
app.selectedLabel=my-navigation.selectedLabel；
});

在Polymer 1.0中，您不能在模板内部进行

$.*

绑定。相反，要么重构，要么使用计算函数

在您的情况下，由于

selectedLabel

和

toolbartitle

共享相同的值，因此最好将它们绑定到相同的属性

此外，以声明方式传入（通过元素标记）的属性名称需要序列化，因此

selectedLabel

将变为

selectedLabel

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


...
...
window.addEventListener（“WebComponentsReady”，函数（e）{
document.querySelector（“#tpl”）.myLabel=“Home”；
...
});
...

无法执行此操作，因为对

中的

所选标签的更改不会传播到
。也。属性必须序列化。我不认为他想传播更改，对我来说，这是一个简单的静态字符串属性