在自动绑定模型中的Polymer Dart $ []选择器 [英] Polymer Dart $[] selector in an autobinding model
问题描述
由于聚合物体 已被移除，因此我们需要使用自动绑定模板，以在 PolymerElement 之外使用聚合物绑定功能：
Since polymer-body has been removed, we need to use an auto-binded template to use polymer binding features outside of a PolymerElement:
<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>
不幸的是，整个模型现在扩展 >，每个绑定似乎都有效，但 PolymerElement 数组选择器$ ['foo'] 不能再使用了...
Unfortunately, the whole model now extends Observable, every binding seems to work, but the PolymerElement array selector $['foo'] cant be used anymore...
容易的方法来实现这个$ ['id']选择器到一个Observable模型？
推荐答案
使用正常的Polymer元素而不是 auto-binding-dart 。
然后你不必关心差异，你不需要'main' 。
我总是以< app-element> Polymer元素启动Polymer项目，作为 main（）和整个应用程序的容器。
I would suggest to use a normal Polymer element instead of auto-binding-dart.
Then you don't have to care about differences and you need no 'main'.
I always start a Polymer project with an <app-element> Polymer element that acts as main() and container for the entire app.
我也建议不要使用内联代码。
据我所知，它有一些限制特别是调试不被支持（可能已经修复，我不知道，因为我从来不使用它）。
I also would suggest to not use inline code.
As far as I know it has some limitations especially debugging is not supported (might be fixed already, I don't know because I never use it).
要使 $ work你需要一个小而简单的解决方法;
To make $ work you need a small and simple workaround;
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!');
}
}
这篇关于在自动绑定模型中的Polymer Dart $ []选择器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
