带有聚合物的打字稿


Typescript with Polymer

我知道关于这个主题还有其他问题，但没有一个答案特别有用，有些已经过时，所以我想我会再问一次。

有没有人有幸得到Polymer和Typescript好玩吗？ 看起来它几乎就在那里，理想情况下我们想要为聚合物提供一个类实例或原型，然后它会处理剩下的事情。

例如，给出以下内容：

1
2
3
4
5
6
7
8
9
<link rel="import" href="../bower_components/polymer/polymer.html">

<polymer-element name="my-element" attributes="color">
    <template>      
        Hello there {{name}}
        <button on-click="{{setFocus}}">Set focus to text input</button>
    </template>
    <script src="my-element.js">    
</polymer-element>

如果我们这样做：

1
2
3
4
5
6
7
class MyElement {
    name ="Mike";
    setFocus() {
        console.log("called");        
    }
}
Polymer(new MyElement());

然后我们正确输出"名称"但单击按钮不会调用该功能。

但是，如果我们这样做：

1
2
3
4
5
6
7
class MyElement {
    name ="Mike";
    setFocus() {
        console.log("called");        
    }
}
Polymer(MyElement.prototype);

然后我们在单击按钮时获得控制台输出，但变量未定义。

任何人都有任何线索我们如何让这些发挥得很好？

我写了一个库来处理这个，检查https://github.com/nippur72/PolymerTS，但只适用于新的Polymer(> = 1.0)。

相关讨论

默认字段值在构造函数中设置，但是当您将原型传递给Polymer()时，它无权访问构造函数。

而是在created回调中设置默认值。 这有点像黑客，但它并不仅限于Typescript，我遇到了编写闭包编译器样式类用作聚合物元素的相同事情。

1
2
3
4
5
6
7
8
9
10
class MyElement {
    name : string;
    created() {
      this.name ="Mike";
    }
    setFocus() {
        console.log("called");        
    }
}
Polymer(MyElement.prototype);
相关讨论