我的最终目标是不必像这样编写HTML：
<div id='counter'>
{{counter}}
</div>
<div>
<button
id="startButton"
on-click="{{start}}">
Start
</button>
<button
id="stopButton"
on-click="{{stop}}">
Stop
</button>
<button
id="resetButton"
on-click="{{reset}}">
Reset
</button>
</div>
我想知道是否可以在不使用HTML的情况下创建Polymer-element.例如我试过这个：
@CustomTag('tute-stopwatch')
class TuteStopWatch extends PolymerElement {
ButtonElement startButton,stopButton,resetButton;
@observable String counter = '00:00';
TuteStopWatch.created() : super.created() {
createShadowRoot()..children = [
new DivElement()..text = '{{counter}}',new DivElement()..children = [
startButton = new ButtonElement()..text = 'Start'
..onClick.listen(start),stopButton = new ButtonElement()..text = 'Stop'
..onClick.listen(stop),resetButton = new ButtonElement()..text = 'Reset'
..onClick.listen(reset)
]
];
}
}
以前的代码正确创建HTML和影子根,但它不会在@observable计数器和DivElement文本之间创建绑定.
我知道这是因为我在实例化/创建元素后尝试创建阴影根.因此,在模板与其observable绑定之前,我应该在其他位置创建元素的模板.
解决方法
您可以编写如下手动数据绑定：
changes.listen((changes) {
for (var change in changes) {
if (change.name == #counter) {
myDivElement.text = change.newValue;
}
}
});
changes是Observable类的属性,PolymerElement混入.(这在API参考中很难看到,因为它目前没有显示类’mixins或混合的属性和方法.)
Polymer似乎主要是关于启用基于声明的基于html的绑定.可能值得直接使用自定义元素和阴影dom进行探索,因为在此示例中您并未真正使用聚合物.为此,您需要将类定义更改为：
class TuteStopWatch extends HtmlElement with Observable {
...
}
并使用document.register()注册您的元素.您还需要包含自定义元素的polymer.js polyfill.
