Geek Answers Handbook

Polymer and TypeScript

I'm trying unsuccessfully to implement a web component that integrates Polymer and TypeScript. Does anyone know where I can see a sample? Is there an alternative to Polymer? Thanks

+8
typescript
source share
1 answer

I came up with a solution ... maybe not the best solution, but at least some kind of working solution. Still need to explore deeper than that.

custom HTML element:

<link rel="import" href="../polymer/bower_components/polymer/polymer.html"/> <polymer-element name="my-element" constructor="MyElement5"> <template> <span id="el"></span> </template> <script src="my-element.js"/> </polymer-element>

my typescript file (my-element.ts):

 class Owner{ ownerinfo:string; constructor(public firstName:string, public age:number){ this.ownerinfo = firstName + " " + age + " yo"; } } var polymer = window['Polymer']; polymer('my-element',{ owner:new Owner('TheOwner', 100), ready:function(){ this.$.el.textContent = this.owner.ownerinfo; } })

and finally javascript generated by TypeScript:

 var Owner = (function () { function Owner(firstName, age) { this.firstName = firstName; this.age = age; this.ownerinfo = firstName + " " + age + " yo"; } return Owner; })(); var polymer = window['Polymer']; polymer('my-element', { owner: new Owner('TheOwner', 100), ready: function () { this.$.el.textContent = this.owner.ownerinfo; } }); //# sourceMappingURL=my-element.js.map

And it works with that, and I can even debug it in Firefox or Chrome. Let's see if I come back a little more ... I hope this helps the other guys.

In the end, I thought too much ... and forgot the most important thing: typescript JavaScript LoL

== almost forgot my Pyramid template:

 <!DOCTYPE html> <html> <head> <title></title> <script src="${request.static_url('my_project:static/polymer/bower_components/platform/platform.js')}"/> <script src="http://code.jquery.com/jquery-2.1.1.js"></script> <script src="http://code.jquery.com/jquery-migrate-1.2.1.js"></script> <!-- Custom webcomponents --> <link rel="import" href="${request.static_url('my_project:static/webcomponents/my-element.html')}"/> <!-- Bootstrap core CSS --> <link href="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <link href="${request.static_url('my_project:static/theme.css')}" rel="stylesheet"> </head> <body> <!-- My Super Custom WebComponent --> <my-element></my-element> <script src="//oss.maxcdn.com/libs/twitter-bootstrap/3.0.3/js/bootstrap.min.js"></script> </body> </html>

Awesome ... Polymer + typescript + Python

+7
source share

More articles:


All Articles