Question

问题：我的主 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>

但它会引发错误： -

未捕获的TypeError：无法读取属性＆＃39; $＆＃39;未定义的

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

Answer 2

可能有更好的方法，但你可以试试这个：

Array
(
    [0] => abc
    [1] => def ghi
)

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

2 个答案: