Polymer + requirejs：在Polymer升级元素之前，属性是数据绑定的 [英] Polymer + requirejs: Attributes on were data bound prior to Polymer upgrading the element

问题描述

我正在尝试对Polymer使用requirejs：

I'm trying to use requirejs with Polymer:

<polymer-element name="test-element">
  <script>
    require(['module'], function (module) {
      Polymer('test-element', module);
    });
  </script>
  <template>
    Test
  </template>
</polymer-element>

但我收到警告：

Attributes on test-element were data bound prior to Polymer upgrading the element. This may result in incorrect binding types. 

1. 我应该关注这个警告吗？


2. 在Polymer升级元素后，如何使
   属性成为数据绑定？


3. 是否有
   有任何其他聚合物专用装载器将AMD模块装入
   聚合物网页组件？

---------编辑

事实证明，只有当test-element位于另一个聚合物网络组件内时才会出现问题。
我创建了一个github repo来显示：
https：// github.com/finalclass/polymer-bug-requirejs

推荐答案

编辑：谢谢澄清一下，当Polymer元素位于另一个Polymer元素中时，这只是一个问题。这指出了潜在的问题。使用requirejs并不特别;您可以通过以下内容重现警告：

EDIT: Thanks for clarifying that this only is an issue when your Polymer element is inside another Polymer element. That points to the underlying issue. It's not particular to using requirejs; you can reproduce the warning via something like

<script>
  setTimeout(function() {
    Polymer('test-b', {});
  }, 0);
</script>

在这两种情况下， Polymer（'test-b'，.. 。）在父元素（在您的示例中为< test-a> ）已经完全初始化之后异步调用函数，这显然是不是一个好的做法。

In both cases, the Polymer('test-b', ...) function is invoked asynchronously after the parent element (<test-a> in your example) has already been fully initialized, and that's apparently not a good practice.

你可以重构一些东西，以达到Polymer满意的东西。例如，如果模块包含您要在< test-b> 上设置的一堆属性，您可以推迟加载模块并设置它们，直到创建的回调被触发后，如下所示：

You could refactor things a bit to get to something that Polymer is happy with. For instance, if module holds a bunch of properties that you want to set on your <test-b>, you could defer loading the module and setting them until after the created callback has been fired, like so:

<script>
  Polymer('test-b', {
    created: function() {
      var testB = this;
      require(['test-b-js'], function (module) {
        // There might be a more efficient way to copy over the properties...
        Object.keys(module).forEach(function(key) {
          testB.publish[key] = module[key];
        });
      }); 
    }
  });
</script>

这也跟随记录的最佳实践，用于初始化作为数组/对象的属性，而不必担心共享状态陷阱，因此还有一个额外的好处。有人担心在创建的回调期间实际上不会设置属性，而是稍后稍后（因为，再次，中的回调需要（）是异步的），但实际上这可能不是问题。

This also follows the documented best practice for initializing properties that are array/objects without having to worry about shared state gotchas, so there's an added benefit. There is the slight concern that the properties won't actually be set during the created callback but instead slightly afterwards (since, again, the callback in require() is asynchronous), but in practice that might not be an issue.

一个可能更大的问题是那些属性不会是已发布;如果这对您很重要，那么需要一个更有创意的解决方案。

A potentially larger concern is that those properties won't be published; if that's important to you, then a more creative solution is needed.

这篇关于Polymer + requirejs：在Polymer升级元素之前，属性是数据绑定的的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！