有没有可能创建一个没有Html的聚合物元素？
有没有可能创建一个没有Html的聚合物元素？
提问于 2014-03-27 03:26:52
我的最终目标是不必像这样编写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的情况下创建一个聚合物元素。例如，我尝试过这样做：
@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 counter和DivElement文本之间的绑定。
我知道这是因为我试图在元素实例化/创建之后创建阴影根。因此，在模板与其可观察性绑定之前，应该在其他地方创建元素的模板。
Stack Overflow用户
回答已采纳
发布于 2014-03-28 10:48:24
您可以编写这样的手动数据绑定：
changes.listen((changes) {
for (var change in changes) {
if (change.name == #counter) {
myDivElement.text = change.newValue;
}
}
});变化是可观察类的一个属性，PolymerElement混合在其中。(在API引用中很难看到这一点，因为它目前没有显示类的混合或属性和方法中的混合。)
聚合物似乎主要是支持声明式的基于html的绑定。这可能是值得探索使用定制元素和阴影直接，因为你没有真正使用聚合物在这个例子中的任何东西。为此，需要将类定义更改为：
class TuteStopWatch extends HtmlElement with Observable {
...
}并向document.register()注册元素。您还需要包括自定义元素的polymer.js填充。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/22677678
复制相关文章
相似问题
腾讯云开发者
