我一直在努力实现集成Polymer和TypeScript的Web组件.有谁知道我在哪里可以看到样品?聚合物有替代品吗?谢谢
我想出了一个解决方案......也许不是最好的解决方案,但至少是一种有效的解决方案.仍需要对此进行更深入的调查.
自定义元素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>
Run Code Online (Sandbox Code Playgroud)
我的打字稿文件(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;
}
})
Run Code Online (Sandbox Code Playgroud)
最后,TypeScript生成的javascript:
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
Run Code Online (Sandbox Code Playgroud)
有了它,它可以工作,我甚至可以在Firefox或Chrome中调试.让我们来看看我是否有一些退步...希望这有助于其他人.
最后我想的太多了......忘了最重要的:TypeScript是JavaScript LoL
==差点忘了我的金字塔模板:
<!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>
Run Code Online (Sandbox Code Playgroud)
真棒......聚合物+ TypeScript + Python
归档时间: |
|
查看次数: |
2585 次 |
最近记录: |