Since 聚合物体已被删除,我们需要使用自动结合模板来使用聚合物结合功能之外聚合物元件:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Sample app</title>
<script src="packages/web_components/platform.js"></script>
<script src="packages/web_components/dart_support.js"></script>
<link rel="import" href="packages/polymer/polymer.html">
<script src="packages/browser/dart.js"></script>
</head>
<body>
<template is="auto-binding-dart">
<div>Say something: <input value="{{value}}"></div>
<div>You said: {{value}}</div>
<button id="mybutton" on-tap="{{buttonTap}}">Tap me!</button>
</template>
<script type="application/dart">
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart';
main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
var template = document.querySelector('template');
templateBind(template).model = new MyModel();
});
});
}
class MyModel extends Observable {
//$['mybutton'] wont works there
@observable String value = 'something';
buttonTap() => print('tap!');
}
</script>
</body>
</html>
不幸的是,整个模型现在扩展了可观察的,每个绑定似乎都有效,but the 聚合物元件数组选择器 $['foo']不能再用了...
有没有简单的方法可以将这个 $['id'] 选择器实现到 Observable 模型中?
我建议使用普通的聚合物元素而不是auto-binding-dart
.
那么你就不必关心差异,也不需要“主要”。
我总是开始一个聚合物项目<app-element>
聚合物元件充当main()
以及整个应用程序的容器。
我还建议不要使用内联代码。
据我所知它有一些限制,特别是不支持调试(可能已经修复,我不知道,因为我从未使用过它)。
To make $
工作中您需要一个小而简单的解决方法;
import 'dart:html';
import 'package:polymer/polymer.dart';
import 'package:template_binding/template_binding.dart';
Map<String, dynamic> $; // we define our own '$'
main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
var template = document.querySelector('template') as Polymer;
$ = template.$; // we assign template.$ to our own '$' so we can omit the 'template' part
templateBind(template).model = new MyModel();
});
});
}
class MyModel extends Observable {
//$['mybutton'] wont work there - it can't because this is outside of a method
@observable String value = 'something';
buttonTap() {
print($['mybutton'].id); // here it works
print('tap!');
}
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)