Again, things are broken in Patterns in Polymer. I would like to get it mostly in order by the end of the month, so having the latest Polymer expose yet more problems is less than ideal. Hopefully these are the easy kinds of problems (they never are).
Actually, there is some hope this time around. All of the book's tests are passing. Even though the tests could be better in places, that still counts for something. The actual problems occur in a handful of the JavaScript smoke tests. In addition to unit and/or acceptance tests, the code for each chapter includes an
index.html page that I normally access with the aid of Python's simple HTTP server. Only they stopped working for some reason.I am unsure if there is a common thread, but some of the pages are just blank. Looking through the code, I see that I am definitely using the correct life-cycle methods:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="normal-changes">
<template>
</template>
<script>
Polymer('normal-changes', {
// ...
attached: function() {
console.log('yo')
// ...
};
</script>
</polymer-element>Console debugging verifies that the Polymer element is being created properly. The page is just blank for some reason...D'oh!
It is blank because the smoke test page contains nothing but a Polymer element wrapping a content-editable field:
<body>
<div class=container>
<normal-changes>
<div contenteditable>
<!-- ... -->
</div>
</normal-changes>
</div>
</body><template>, which lacks a <content> element into which the page can project the wrapped content. The fix is to simply add the tag:<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="normal-changes">
<template>
<content></content>
</template>
<script>
Polymer('normal-changes', {
// ...
attached: function() {
console.log('yo')
// ...
};
</script>
</polymer-element>A reload now includes the Polymer wrapped content:
I have no idea how that ever worked, but Polymer must have been OK with it at one point.
Most of the other changes are along the same lines—silly things that I just missed or I cannot figure out how they ever worked. That said, the plain-old forms chapter was just broken. I definitely need to revisit the test code on that tomorrow. For now, I get it working through a combination of reflecting changes in the attribute and better mutation observing in the main page.
I am publishing the current pizza state in the
state attribute. For changes to be reflected, I need to explicitly mark it as such:Polymer('x-pizza', {
// ...
publish: {
state: {
value: '',
reflect: true
}
},
// ...
});The chapter still recommends watching that value so that changes can be synchronized in the containing form. Mutation observing seems to have gotten a little easier thanks to whenPolymerReady():Polymer.whenPolymerReady(function(){
var input = document.querySelector('#pizza_value');
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.attributeName == 'state') {
input.value = mutation.target[mutation.attributeName];
}
});
});
observer.observe(document.querySelector('x-pizza'), {attributes: true});
});
The previous version of that code required three separate functions and some convoluted wait-for-polymer logic. This seems much nicer (and closer to the Dart solution).At any rate, I have all of the smoke tests working. I will revisit the tests for the Forms chapter tomorrow.
Day #1
No comments:
Post a Comment