Question

我在Polymer中有单页应用。一切正常，但是当我硫化它时，我总是在Polymer的默认代码的许多地方得到Uncaught TypeError: undefined is not a function。但毕竟我的应用仍然有效。但点击<my-register-box>元素中的“注册”按钮后，我看不到任何纸质烤面包。

我的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] ...

}

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

硫化破坏聚合物代码（Uncaught TypeError：undefined不是函数）

1 个答案: