Dart的数据绑定失败 [英] Data binding fails with Dart
本文介绍了Dart的数据绑定失败的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试一些初学者教程，以了解与Dart-Polymer的数据绑定，但没有一个示例正在工作。我可以运行包含在项目中的示例，所以想知道我的代码有什么问题。从以下链接，这里是我的代码：
<！DOCTYPE html>
< html>
< head>
< script src =packages / web_components / dart_support.js>< / script>
<！ - < script src =packages / web_components / platform.js>< / script>
不再需要Polymer> = 0.14.0 - >
< script async src =packages / browser / dart.js>< / script>
< script async type =application / dartsrc =bind.dart>< / script>
< / head>
< body>
< p> x = {{x}}< / p>
< ul>
< template iterate ='item in list'>
< li> list item = {{item}}< / li>
< / template>
< / ul>
< ul>
< template iterate ='key in map.keys'>
< li> map key = {{key}}，map value = {{map [key]}}< / li>
< / template>
< / ul>
< / body>
< / html>
Dart文件：
import'dart：async';
import'package：polymer / polymer.dart';
列表list = toObservable（新List（））;
Map< String，num> map = toObservable（new Map（））;
@observable num x = 0;
void main（）{
initPolymer（）。run（（）{
Polymer.onReady.then（（_）{
new Timer.periodic（new Duration（seconds：1），（_）{
x + = 1;
list.add（x）;
map [x.toString（）] = x;
if（x％4 == 0）{
list.clear（）;
map.clear（）;
}
return x; b $ b}）;
}）;
}）;
}
当我运行上面的代码，x = {{x}}在控制台中显示以下内容：
顶级字段不能再被观察到。可观察的字段应该
放在一个可观察的对象中。
我试图从变量x中删除@observable也删除了.html文件中的引用），然后什么也不打印。这里是修订的HTML：
<！DOCTYPE html>
< html>
< head>
< script src =packages / web_components / dart_support.js>< / script>
<！ - < script src =packages / web_components / platform.js>< / script>
不再需要Polymer> = 0.14.0 - >
< script async src =packages / browser / dart.js>< / script>
< script async type =application / dartsrc =bind.dart>< / script>
< / head>
< body>
< ul>
< template iterate ='item in list'>
< li> list item = {{item}}< / li>
< / template>
< / ul>
< ul>
< template iterate ='key in map.keys'>
< li> map key = {{key}}，map value = {{map [key]}}< / li>
< / template>
< / ul>
< / body>
< / html>
修订的DART档案：
import'dart：async';
import'package：polymer / polymer.dart';
列表list = toObservable（新List（））;
Map< String，num> map = toObservable（new Map（））;
num x = 0;
void main（）{
initPolymer（）。run（（）{
Polymer.onReady.then（（_）{
new Timer .periodic（new Duration（seconds：1），（_）{
x + = 1;
list.add（x）;
map [x.toString（）] = x;
if（x％4 == 0）{
list.clear（）;
map.clear（）;
}
return x;
} ）;
}）;
}）;
}
解决方案
/ p>
- Mousache绑定仅在
< template>标记中有效。
在Polymer元素之外可以有< template>标记（参见 https://github.com/dart-lang/core-elements/blob/master/test/core_input.html ）。
为此，您使用AutoBindingElement（< template is =auto-binding-dart> / code>），并且必须为它分配一个模型（见下面的代码）。
< template id =bindValueTemplateis =auto-binding-dart>
< core-input id =bindValueplaceholder =bindValuevalue ={{stringValue}}>< / core-input>
< / template>
- 级别变量observable（如错误消息所示）。
变量必须在扩展或实现Observable的类中：
class MyModel extends Object with Observable {
@observable
String stringValue;
@observable
bool isInvalid;
function changeHandler;
function inputHandler;
function inputInvalidHandler;
function inputValidHandler;
}
void main（）{
initPolymer（）。run（（）{
return Polymer.onReady.then
var template =
dom.document.querySelector（＃bindValueTemplate）as AutoBindingElement;
var model = template.model = new MyModel（）;
}）;
}
I am trying some beginner tutorials to understand data binding with Dart-Polymer, but none of the examples are working. I am able to run the samples included in the project, so wonder what's wrong with my code. From the following link, here is my code :
<!DOCTYPE html>
<html>
<head>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="bind.dart"></script>
</head>
<body>
<p>x = {{ x }}</p>
<ul>
<template iterate='item in list'>
<li>list item = {{item}}</li>
</template>
</ul>
<ul>
<template iterate='key in map.keys'>
<li>map key = {{key}}, map value = {{map[key]}}</li>
</template>
</ul>
</body>
</html>
Dart file :
import 'dart:async';
import 'package:polymer/polymer.dart';
List list = toObservable(new List());
Map<String, num> map = toObservable(new Map());
@observable num x = 0;
void main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
new Timer.periodic(new Duration(seconds: 1), (_) {
x += 1;
list.add(x);
map[x.toString()] = x;
if (x % 4 == 0) {
list.clear();
map.clear();
}
return x;
});
});
});
}
When I run the above code, x = {{ x }} is printed with the following in console :
Top-level fields can no longer be observable. Observable fields should be put in an observable objects.
I tried dropping @observable from the variable "x" (and also dropped the reference in .html file), then nothing is printed. Here is revised HTML :
<!DOCTYPE html>
<html>
<head>
<script src="packages/web_components/dart_support.js"></script>
<!-- <script src="packages/web_components/platform.js"></script>
not necessary anymore with Polymer >= 0.14.0 -->
<script async src="packages/browser/dart.js"></script>
<script async type="application/dart" src="bind.dart"></script>
</head>
<body>
<ul>
<template iterate='item in list'>
<li>list item = {{item}}</li>
</template>
</ul>
<ul>
<template iterate='key in map.keys'>
<li>map key = {{key}}, map value = {{map[key]}}</li>
</template>
</ul>
</body>
</html>
Revised DART file :
import 'dart:async';
import 'package:polymer/polymer.dart';
List list = toObservable(new List());
Map<String, num> map = toObservable(new Map());
num x = 0;
void main() {
initPolymer().run(() {
Polymer.onReady.then((_) {
new Timer.periodic(new Duration(seconds: 1), (_) {
x += 1;
list.add(x);
map[x.toString()] = x;
if (x % 4 == 0) {
list.clear();
map.clear();
}
return x;
});
});
});
}
解决方案
There are two things:
- Mousache binding only works inside a
<template>tag. You can have<template>tag outside of a Polymer element (see https://github.com/dart-lang/core-elements/blob/master/test/core_input.html for example).
For this you use theAutoBindingElement(<template is="auto-binding-dart">) and you have to assign a model to it (see code below).
<template id="bindValueTemplate" is="auto-binding-dart">
<core-input id="bindValue" placeholder="bindValue" value="{{stringValue}}"></core-input>
</template>
- You can not make a top level variable observable (as the error message says). The variable has to be in a class that extends or implements Observable:
class MyModel extends Object with Observable {
@observable
String stringValue;
@observable
bool isInvalid;
Function changeHandler;
Function inputHandler;
Function inputInvalidHandler;
Function inputValidHandler;
}
void main() {
initPolymer().run(() {
return Polymer.onReady.then((_) {
var template =
dom.document.querySelector("#bindValueTemplate") as AutoBindingElement;
var model = template.model = new MyModel();
});
}
这篇关于Dart的数据绑定失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
