So I'm using PolymerTS to use TypeScript with my polymer web app, but I can't for the life of me figure out how to import existing behaviors present into my components.
For example, if I wanted to use IronControlState in my component in a normal polymer component I would:
<link rel="import" href="../bower_components/iron-behaviors/iron-control-state.html">
<template code>
Polymer({
is: 'example-component',
properties: {
name: {stype: String},
value: {type: String},
valueShort: {
},
behaviors: [
Polymer.IronControlState,
],
The documentation for PolymerTS says I'm supposed to just use a decorator @behavior to add a behavior to my component. This if fine if the behavior is defined in some TypeScript code imported in my ts code. But for behaviors built into Polymer, I'm lost.
If I just try:
declare var Polymer: {IronControlState: {focused: boolean} };
@component('example-component')
@behavior(Polymer.IronControlState)
export class ExampleComponent extends polymer.Base {
with the same imports in my HTML, I get the following error in my browser's console:
[example-component::_flattenBehaviorsList]: behavior is null, check for missing or 404 import
which suggests to me that it's not finding the behavior I'm asking for...
However, Polymer.IronControlState is definitely being loaded. From the .ts I can add:
ready() {
console.log(Polymer.IronControlState);
}
and it outputs: Object {properties: Object, observers: Array[1]}
But if I try to log this.focused it outputs 'undefined'.
Help! Thanks!
So it turns out that adding behaviors was only supported from TypeScript Classes. The latest revision has added a fix to support behaviors from generic functions: