我写了一个真正的simple element to validate a form，并为它写了完整的演示。要查看它，只需bower install hot-form-validator，然后使用polymer serve查看演示。
我遇到了一个奇怪的问题，就像在演示中纸质吐司出现的颜色错误一样。
以下是演示的来源。请只考虑前三个片段。看看第88,119和第149行。
似乎只采取了属性的最后一个设置。但是，由于规则的目标是Polymer元素，因此应该保持值...
我做错了什么？
<!doctype html>
<html>
<head>
<title>hot-form-validator demo</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
<script src="../../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
<link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
<link rel="import" href="../hot-form-validator.html">
<!-- devDependencies -->
<link rel="import" href="../../iron-form/iron-form.html">
<link rel="import" href="../../paper-input/paper-input.html">
<link rel="import" href="../../paper-toast/paper-toast.html">
<link rel="import" href="../../paper-button/paper-button.html">
<link rel="import" href="../../iron-ajax/iron-ajax.html">
<script src="../../sinonjs/sinon.js"></script>
<style is="custom-style" include="demo-pages-shared-styles">
:root {
paper-toast {
--paper-toast-background-color: green;
--paper-toast-color: white;
};
paper-toast#secondGlobalToast {
--paper-toast-background-color: blue;
--paper-toast-color: white;
};
paper-toast#errorGlobalToast {
--paper-toast-background-color: red;
--paper-toast-color: white;
};
}
</style>
</head>
<body>
<paper-toast id="firstGlobalToast"></paper-toast>
<paper-toast id="secondGlobalToast" class="second"></paper-toast>
<paper-toast class="error" id="errorGlobalToast"></paper-toast>
<script>
sinon.log = function( m ){console.log("Message:", m)};
//var server = sinon.useFakeXMLHttpRequest()
server = sinon.fakeServerWithClock.create();
//server.autoRespond = true;
server.respondImmediately = true;
server.respondWith(
'POST',
'submit_validating', [
200,
'application/json',
'{"name":"nameField","surname":"surnameField"}'
]
);
server.respondWith(
'POST',
'submit_not_validating', [
422,
'application/json',
'{"message":"Unprocessable Entity","errors":[{"field":"maker","message":"Maker is not acceptable"}]}'
]
);
</script>
<h1>Local toasts</h1>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, passing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: white; /* This is overwritten by line 149?!? */
--paper-toast-color: white;
};
paper-toast#errorToast {
--paper-toast-background-color: red;
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, failing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: green;
--paper-toast-color: white;
};
paper-toast#errorToast {
--paper-toast-background-color: red; /* This is overwritten by line 149?!? */
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_not_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using specified toast element, passing</h3>
<demo-snippet>
<template>
<style is="custom-style">
paper-toast {
--paper-toast-background-color: gray; /* THIS influences line 119 */
--paper-toast-color: white;
};
paper-toast#secondToast {
--paper-toast-background-color: blue;
--paper-toast-color: white;
};
paper-toast.errorToast {
--paper-toast-background-color: purple;
--paper-toast-color: white;
};
</style>
<hot-form-validator sane-submit toast-id="secondToast" error-toast-id="errorToast">
<paper-toast id="firstToast"></paper-toast>
<paper-toast id="secondToast"></paper-toast>
<paper-toast id="errorToast"></paper-toast>
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<h1>Global toasts</h1>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using global toast element, passing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using global toast element, failing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_not_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
<div class="vertical-section-container centered">
<h3>Basic hot-form-validator, using specified global toast element, passing</h3>
<demo-snippet>
<template>
<hot-form-validator sane-submit global-toast toast-id="secondGlobalToast" error-toast-id="errorGlobalToast">
<form id="form" is="iron-form" method="POST" action="submit_validating">
<paper-input name="maker" id="maker" ></paper-input>
<paper-input name="model" id="model"></paper-input>
<paper-button type="submit" raised>Submit!</paper-button>
</form>
</hot-form-validator>
</template>
</demo-snippet>
</div>
</body>
</html>