Polymer und TypeScript

Ich habe versucht, ohne Erfolg eine Web-Komponente zu implementieren, die Polymer und TypeScript integriert. Weiß jemand, wo kann ich eine Probe sehen? Gibt es eine Alternative zu Polymer? DankePolymer und TypeScript

Quelle

2014-05-19 Rui Lima

Ich kam mit einer Lösung ... vielleicht nicht die beste Lösung, aber zumindest eine Art funktionierende Lösung. Ich muss noch tiefer nachforschen.

das benutzerdefinierte Element HTML:

<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>

meine Typoskript-Datei (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; 
    } 
})

und schließlich die Javascript erzeugt durch Typoskript:

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

Und damit funktioniert es und ich kann sogar in Firefox oder Chrome debuggen. Mal sehen, ob ich mit einem Schritt zurück komme ... Hoffe das hilft anderen Jungs.

Am Ende ich zu viel dachte ... und vergessen, das wichtigste: Typoskript JavaScript ist LoL

== fast vergessen meine Pyramide Vorlage:

<!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>

Ehrfürchtig ... Polymer + TypeScript + Python

Quelle

2014-05-19 22:49:04

Betrachten Sie auch eine Polymer.d.ts-Datei hinzufügen, so dass Sie nicht brauchen, um die 'var Polymer = Fenster ['Polymer'];" Geschäft. Zum Beispiel: 'var Polymer: (Name: Zeichenfolge, Attribute?: {[Feldname: Zeichenfolge]: any}) => void;' –

Netter Tipp, danke –

Überlegen Sie, ob Sie das --noImplicitAny-Flag für tsc- wie @PeterBurns verwenden wies darauf hin, var polymer = window ['Polymer']; endet mit Polymer, das vom Typ any ist, was Ihnen keinerlei Artschutz gibt. Selbst wenn Sie nicht alle Polymere vollständig eintippen möchten, wäre es ein guter Anfang, mit einer Basis-Polymer-Schnittstelle zu beginnen, die Sie hinzufügen, während Sie gehen. –

Polymer und TypeScript

Antwort

Verwandte Themen