typescript 与 polymer

Question

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

有没有人幸运地让 Polymer 和 Typescript 发挥得很好？看起来就快完成了，理想情况下，我们希望为 Polymer 提供一个类实例或原型(prototype)，然后由它来处理其余部分。

例如给定以下内容:

<link rel="import" href="../bower_components/polymer/polymer.html">

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

如果我们这样做:

class MyElement {
    name = "Mike";
    setFocus() {
        console.log("called");        
    }
}
Polymer(new MyElement());

然后我们正确输出了“name”，但是点击按钮并没有调用该函数。

但是如果我们这样做:

class MyElement {
    name = "Mike";
    setFocus() {
        console.log("called");        
    }
}
Polymer(MyElement.prototype);

然后当我们点击按钮但变量未定义时，我们得到控制台输出。

任何人都知道我们如何让这些玩得很好吗？

Answer 1

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