Vulcanization breaks Polymer code (Uncaught TypeError: undefined is not a function)

Question

我在 Polymer 中有单页应用程序。一切都很好，但是当我硫化它时，我总是在 Polymer 的默认代码的许多地方得到 Uncaught TypeError: undefined is not a function。但毕竟我的应用程序仍然有效。但是点击 <my-register-box> 元素中的 "Register" 按钮后，我看不到任何纸吐司。

我的 index.html 看起来像这样：

<head>
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
....
<link rel="import" href="bower_components/core-scaffold/core-scaffold.html">
<link rel="import" href="bower_components/core-animated-pages/core-animated-pages.html">
<link rel="import" href="bower_components/core-animated-pages/transitions/slide-from-right.html">
<link rel="import" href="bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/flatiron-director/flatiron-director.html">
....
<link rel="import" href="register-box.html">
...
</head>

<body>
...
<my-register-box name="{{name}}" email="{{email}}" url="{{url}}"></my-register-box>
...

和 register-box.html 像这样：

<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/core-icon/core-icon.html">
<link rel="import" href="bower_components/font-roboto/roboto.html">
<link rel="import" href="bower_components/paper-button/paper-button.html">
<link rel="import" href="bower_components/paper-checkbox/paper-checkbox.html">
<link rel="import" href="bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="bower_components/paper-input/paper-input-decorator.html">
<link rel="import" href="bower_components/paper-input/paper-input.html">
<link rel="import" href="bower_components/paper-toast/paper-toast.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">

<polymer-element name="my-register-box" attributes="name email url">
    <template>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">  </script>
        <script src="jsencrypt.min.js"></script>
        <paper-input-decorator label="Enter your name" floatingLabel error="Required">
            <input is="core-input" id="form_name" required>
        </paper-input-decorator>

        ...

        <paper-toast id="formTermsToast" text="You must agree with temrs"></paper-toast>
        <paper-toast id="formValidToast" text="Form is not valid"></paper-toast>
        ....

        <paper-fab id="fab" icon="check" title="Register"
                   on-click="{{register}}"></paper-fab>
    </template>
    <script type="text/javascript">
        Polymer({
            name: '?',
            email: '?',
            url: '?',
            autoValidate: false,
            valid: false,
            observe: {
                '$.form_name.validity.valid': 'validate',
                '$.form_email.validity.valid': 'validate',
                '$.form_sa_uname.validity.valid': 'validate',
                '$.form_sa_pass.validity.valid': 'validate',
                '$.formTerms.checked': 'validate'
            },
            validate: function() {
                this.valid = true;
                if((!this.readyState) || (!this.autoValidate))
                    return;
                var $d = this.shadowRoot.querySelectorAll('paper-input-decorator');
                var th = this;
                Array.prototype.forEach.call($d, function(d) {
                    d.isInvalid = !d.querySelector('input').validity.valid;
                    if(d.isInvalid) {
                        th.$.formValidToast.show();
                        th.valid = false;
                    }
                });

                if(!this.$.formTerms.checked) {
                    this.$.formTermsToast.show();
                    this.valid = false;
                }
            },
            registerEmail: function() {
                ...
            },
            register: function() {
                this.autoValidate = true;
                this.validate();
                ...
            }
        });
    </script>
</polymer-element>

我的硫化：

vulcanize --inline index.html

例如，我在此处遇到该错误（调用 {{register}} 后）

....
renderOpened: function() {
      this.notifyResize(); //Uncaught TypeError: undefined is not a function
....

但这甚至不是我的代码:-/

Answer 1

我运行在最新版本的 Polymer 和 Vulcanize 中遇到了与 --csp 选项完全相同的问题。

这与最近推出的新的resizer mixin 及其固化方式有关。由于某种原因，mixin 呈现在页面底部，这会导致问题。

是开始的功能块如下：

(function (scope) {

/**
  `Polymer.CoreResizable` and `Polymer.CoreResizer` are a set of mixins that can be used
  in Polymer elements to coordinate the flow of resize events between "resizers" (elements
  that control the size or hidden state of their children) and "resizables" (elements that
  need to be notified when they are resized or un-hidden by their parents in order to take
  action on their new measurements).

  Elements that perform measurement should add the `Core.Resizable` mixin to their 
  Polymer prototype definition and listen for the `core-resize` event on themselves.
  This event will be fired when they become showing after having been hidden,
  when they are resized explicitly by a `CoreResizer`, or when the window has been resized.
  Note, the `core-resize` event is non-bubbling.

  `CoreResizable`'s must manually call the `resizableAttachedHandler` from the element's
  `attached` callback and `resizableDetachedHandler` from the element's `detached`
  callback.

    @element CoreResizable
    @status beta
    @homepage github.io
*/

scope.CoreResizable = {

... [rest of code block here] ...

}

将这段代码移到脚本块的顶部（它被 paper-toast 引用），它应该可以工作。我假设这可能会在即将发布的 Vulcanize 版本中得到纠正。

Vulcanization breaks Polymer code (Uncaught TypeError: undefined is not a function)

Vulcanization breaks Polymer code (Uncaught TypeError: undefined is not a function)

javascript

performance

polymer