我在Polymer中有单页应用程序。一切正常，但硫化时，我总是会遇到Uncaught TypeError: undefined is not a functionPolymer默认代码的很多地方。但是毕竟我的应用程序仍然可以运行。但是在<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
....
但这甚至不是我的代码：-/
我在最新版本的Polymer和Vulcanize中使用--csp选项遇到了完全相同的问题。
它与最近引入的新的大小调整器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版本中可能会纠正此问题。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句