New Dart (and Polymer) Update (0.8.5.1_r28990)

editor update notification
Woo Hoo! A new update for the integrated build! I’ve been waiting for this one to land (normally they occur weekly but this was about 2 weeks after the last one). I won’t detail all the changes in this update, that is done much better in the official announcement. But I will mention that this change does require some updates to sources I’ve released.

First I will mention the updates required for Polymer since I it seems to be a general theme for many of my posts. One of the important things to now note is that Polymer Elements are now legitimate HTML elements. As such one update that is required is to change your constructors for your elements. All custom elements require the created() constructor. See the breaking change announcement. So to start with, just PolymerElements will look like this:

@CustomTag('my-element')
class MyElement extends PolymerElement {
  MyElement.created() : super.created();
}

If you are extending an element in your markup, for instance: <polymer-element name="my-element" extends="div"> Then your Dart class must match, and must include a call to polymerCreated() in the created constructor:

@CustomTag('my-element')
class MyElement extends DivElement with Polymer, Observable {
  MyElement.created() : super.created() {
    polymerCreated();
  }
}

This change also means we no longer need to use the xtag property to access the model of our elements. Now we can simply assign directly to the value we receive from query() or querySelector(). As well, the createElement() function no longer exists, and we now create our element the same way we would with a standard HTML element: var myElement = new Element.tag('my-element');

Another important change is that we no longer use Polymer boot.js, and are back to using browser/dart.js and (temporarily) polymer/init.dart. See the breaking change announcement for some fine details.

This change was a little confusing, because you don’t remove the main() method in all situations, only with Polymer Element imports, as near as I can tell. Some confusion may be related to the up-coming breaking change involving only one Dart script per document. That change will take place for Polymer >=0.8.6, and not the current 0.8.5 so I’ll delve into that more in-depth later.

The above changes also mean I had to make some updates to my Polymer with Route sample. Most notably are the changes to the Polymer Elements which were required. Additionally however, the latest build was also causing some issues with Route crashing when the browser was launched because there were no routes matching without a hash sign.

The simple solution to resolve this, was to add a static route for the ‘home’ Url which has an empty event handler:

final HomeUrl = 
    new UrlPattern(r'/routes_example/web/routes_example.html');
// ... 
// And in my router initialization
var router = new Router()..addHandler(MyUrl, route_handler)
    ..addHandler(HomeUrl, (_) { })
    ..listen();

I’m not sure why this didn’t generate an error in the previous version, but this should help to prevent future issues with the missing hash route. It would have also been possible to modify our regular expression to conditionally look for the hash sign and additional characters but ultimately I didn’t think it would have been that beneficial for this small sample.

See the full changes made to the Routes Example with this commit.

This entry was posted in Dart and tagged , . Bookmark the permalink.

Have Something To Add?

Loading Facebook Comments ...
Loading Disqus Comments ...