Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
521 views
in Technique[技术] by (71.8m points)

javascript - Polymer + requirejs: Attributes on were data bound prior to Polymer upgrading the element

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>

But I get the warning:

Attributes on test-element were data bound prior to Polymer upgrading the element. This may result in incorrect binding types. 
  1. Should I be concerned about this warning?
  2. What can I do to make attributes be data bound after Polymer upgrades the element?
  3. Is there any other Polymer specific loader to load AMD modules into polymer web components?

---------edit
It turned out that the problem occurs only if test-element is inside anouther polymer web component. I've created a github repo to show this: https://github.com/finalclass/polymer-bug-requirejs

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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>

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.

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...