首页 文章

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

提问于
浏览 次
2

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

How I used to do in 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：无法读取未定义的属性'$'

polymer web-component

2 回答

  • 0

    您不能在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>
    回复于
  • 1

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

    <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>
    回复于

相关问题