Polymer + requirejs：在 Polymer 升级元素之前，属性是数据绑定的答案

【问题标题】：Polymer + requirejs: Attributes on were data bound prior to Polymer upgrading the elementPolymer + requirejs：在 Polymer 升级元素之前，属性是数据绑定的
【发布时间】：2014-07-01 11:45:54
【问题描述】：

我正在尝试将 requirejs 与 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.

我应该关注这个警告吗？
我可以做什么 Polymer 升级元素后属性是数据绑定的吗？
是有任何其他 Polymer 特定的加载器可将 AMD 模块加载到其中聚合物网络组件？

---------编辑
事实证明，只有当测试元素位于另一个聚合物网组件内时，才会出现问题。我创建了一个 github 存储库来展示这一点： https://github.com/finalclass/polymer-bug-requirejs

【问题讨论】：

标签： javascript requirejs polymer js-amd

【解决方案1】：

编辑：感谢您澄清只有当您的 Polymer 元素位于另一个 Polymer 元素内时，这才是问题。这指向了根本问题。使用 requirejs 并不特别；您可以通过类似的方式重现警告

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

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

您可以稍微重构一下，以获得 Polymer 满意的东西。例如，如果module 拥有一堆你想在<test-b> 上设置的属性，你可以推迟加载模块并设置它们，直到created 回调被触发之后，如下所示：

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

这也遵循documented best practice 用于初始化数组/对象的属性，而不必担心共享状态陷阱，因此还有一个额外的好处。有一点担心，在created 回调期间实际上不会设置属性，而是在稍后设置（因为require() 中的回调是异步的），但实际上这可能不是问题。

一个潜在的更大问题是这些属性不会是published；如果这对您很重要，那么需要一个更有创意的解决方案。

【讨论】：

感谢您的澄清。不幸的是，这不是我问题的答案:(

【解决方案2】：

Jeff 的回答中关于金钱的讨论是正确的。一旦您以某种方式（例如 setTimeout、require）推迟了元素的注册，您必须确保在它准备好之前没有其他人尝试使用该元素。

另一种可能性是只推迟对模块代码的访问，而不是完全阻止元素，如下所示：

<script>
(function() {

  var base = null;
  require(['base'], function(module) {
    base = module;
  });

  Polymer({
    get name() {
      return base ? null : base.name; 
    }
  });

})();
</script>

【讨论】：