Polimer ve TypeScript

Başarıyla denemeye çalışıyorum Polimer ve TypeScript'i entegre eden bir web bileşeni uygulamak. Bir örnek nereden görebileceğimi bilen var mı? Polimer'e bir alternatif var mı? TeşekkürlerPolimer ve TypeScript

kaynak

2014-05-19 Rui Lima

Bir çözüm buldum ... belki de en iyi çözüm değil, en azından çalışma çözümü. Hala bunun üzerinde daha fazla araştırma yapmalıyız.

özel öğe 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>

benim typescript dosyası (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; 
    } 
})

ve son olarak, javascript typescript tarafından oluşturulan:

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

Ve bununla birlikte çalışıyor ve Firefox veya Chrome'da bile hata ayıklayabiliyorum. Bakalım, bir adım geri gelip gelmediğimi anladım ... Bu, diğer erkeklere yardımcı olur umarım.

ben çok fazla ... düşünüyordum sonunda

ve en önemli unuttu: typescript

== neredeyse benim Piramit şablon unuttum LoL JavaScript'tir:

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

Müthiş ... Polimer + TypeScript + Python

kaynak

2014-05-19 22:49:04

Ayrıca bir polimer.d.ts dosyası eklemeyi düşünün, böylece "var polymer = window ['Polymer'];" business. Örneğin: 'var Polymer: (name: string, öznitelikler?: {[FieldName: string]: herhangi bir}) => void;' –

Güzel tavsiye, teşekkürler –

tsc-- 'den @noImplicitAny etiketini kullanmayı düşünün @ AsPerBurns işaret ediyordu, var polymer = window ['Polymer']; Herhangi bir tip koruma sağlayan polimer tipine sahiptir. Tüm Polimerleri tam olarak yazmak istemeseniz bile, eklediğiniz temel Polimer arabiriminden başlayarak mükemmel bir başlangıç olur. –

Polimer ve TypeScript

cevap

İlgili konular