我在 Polymer 中有单页应用程序。一切都很好，但是当我硫化它时，我总是得到 Uncaught TypeError: undefined is not a function在 Polymer 的默认代码的许多地方。但毕竟我的应用程序仍然有效。但是在点击<my-register-box>中的“注册”按钮后，我看不到任何纸质 toast 。元素。
我的 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
....
但这甚至不是我的代码:-/
最佳答案
我在最新版本的 Polymer 和 Vulcanize 中遇到了与 --csp 选项完全相同的问题。
它与最近推出的新的resizer mixin 及其固化方式有关。由于某种原因，mixin 呈现在页面底部，这会导致问题。
就是这样开始的功能 block :
(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] ...
}
将这段代码移到脚本 block 的顶部(它被 paper-toast 引用)，它应该可以工作。我假设这可能会在即将发布的 Vulcanize 版本中得到纠正。
关于javascript - 硫化破坏了 polymer 代码(未捕获的类型错误 : undefined is not a function)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27769385/