Tôi đã cố gắng mà không thành công khi triển khai thành phần web tích hợp Polymer và TypeScript. Có ai biết tôi có thể xem mẫu ở đâu không? Có cách nào khác thay thế cho Polymer không? Cảm ơnPolymer và TypeScript
Tôi đã đưa ra giải pháp ... có thể không phải là giải pháp tốt nhất nhưng ít nhất là giải pháp làm việc. Vẫn cần phải nghiên cứu sâu hơn về điều này.
HTML yếu tố tùy chỉnh:
<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>
tập tin typescript của tôi (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;
}
})
và cuối cùng, javascript được tạo ra bởi nguyên cảo:
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
Và với điều này nó hoạt động và tôi thậm chí có thể gỡ lỗi trong Firefox hoặc Chrome. Hãy xem nếu tôi quay lại một số bước này ... Hy vọng điều này sẽ giúp những người khác.
Vào cuối Tôi đã suy nghĩ quá nhiều ... và quên điều quan trọng nhất: nguyên cảo là JavaScript LoL
== gần như quên mẫu Kim tự tháp của tôi:
<!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
Cân nhắc thêm tệp polymer.d.ts để bạn không cần phải thực hiện 'var polymer = window ['Polymer'];' business. Ví dụ: 'var Polymer: (tên: chuỗi, thuộc tính?: {[FieldName: string]: any}) => void;' –
Lời khuyên hay, cảm ơn –
Cân nhắc sử dụng cờ --noImplicitAny tới tsc-- Như @PeterBurns đã chỉ ra, var polymer = window ['Polymer']; kết thúc với polymer là loại bất kỳ, mà cung cấp cho bạn không có loại bảo vệ nào. Thậm chí nếu bạn không muốn loại đầy đủ tất cả các Polymer, bắt đầu với một giao diện Polymer cơ bản mà bạn thêm vào khi bạn đi sẽ là một khởi đầu tuyệt vời. –