Question

我正在审核polycasts ep 47 app code for blog-pages.html，特别是数据绑定。

在blog-pages.html中，主机属性isLoading，postsActive和postsData未声明为blog-pages主机属性。这是怎么可能的，因为它们是blog-pages主机属性？

   <app-route route="{{route}}"
               pattern="/posts/:slug"
               active="{{postsActive}}"
               data="{{postsData}}"></app-route>

    <list-page category="{{category}}"
               active={{listActive}}
               loading="{{isLoading}}"></list-page>

    <post-page post="{{postsData.slug}}"
               active="{{postsActive}}"
               loading="{{isLoading}}"></post-page>

    <div class="overlay" hidden$="[[!isLoading]]">
      <paper-spinner active="[[isLoading]]"></paper-spinner>
    </div>

  </template>

  <script>
    Polymer({

      is: 'blog-pages',

      observers: [
        '_lockScroll(isLoading)'
      ],

      _lockScroll: function(isLoading) {
        if (isLoading) {
          document.body.style.overflow = 'hidden';
        } else {
          document.body.style.overflow = 'visible';
        }
      }

    });
  </script>

</dom-module>

Answer 1

这不是聚合物如何工作的最好例子。对于初学者来说，它可能会令人困惑。您编写的所有这些变量都是由某些聚合物元素定义的。

例如，在blog-app.html中，您可以看到app-route，其中包含data，tail和pattern。查看app-route.html文件时，您可以看到属性tail有notify: true选项。这意味着，它会将此属性传播到父元素。因此，当您在app-route中定义绑定时，例如：<app-route tail="{{someProp}}"></app-route>，然后在您的元素中将存在someProp属性。

其他文件也一样。例如，看看isLoading。在blog-pages.html中，您可以看到绑定到isLoading，但它没有定义。好吧。在儿童元素。请打开list-page.html并查看<iron-ajax>，您可以在其中查看loading="{{loading}}"。再次相同。查看iron-ajax.html内部并找到属性loading。你看到什么了？再次notify: true选项。这意味着，它会传播到父级（list-page.html），而在list-page.html中，您可以看到还有loading属性已定义notify:true，因此它再次传播到父级（blog-pages.html）因为在blog-pages.html我们有约束loading="{{isLoading}}"，然后它被保存到isLoading属性

这就是聚合物的作用方式。这个项目的例子对于初学者来说真的很难实现，这是不可能的。我希望我的解释对你有所帮助，但我认为你现在更加困惑:-D。

如果您有更多问题，请询问。解释一些事情没问题

数据绑定 - 主机属性不存在声明

1 个答案: