use*_*313 1 dart polymer dart-polymer
将输入字段绑定到对象上的int属性的正确方法是什么(例如,输入框更改并更新对象的int属性,导致绑定到同一属性的另一个元素进行更新)
示例代码如下; 我可能正在考虑采用这条路线的错误方法,但需要一些澄清.
<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
<link rel="import" href="components/calc.html">
<script type="application/dart">export 'package:polymer/init.dart';</script>
<script src="packages/browser/dart.js"></script>
</head>
<body>
<my-calc></my-calc>
</body>
</html>
<!-- calc.html -->
<polymer-element name="my-calc">
<template>
<label>Price</label>
<input value='{{ price }}'>
<label>Qty</label>
<input value='{{ qty }}'>
<label>Total</label>
<input value='{{ price * qty }}'>
</template>
<script type="application/dart" src="calc.dart"></script>
</polymer-element>
.
// calc.dart
import 'package:polymer/polymer.dart';
@CustomTag('my-calc')
class CalcElement extends PolymerElement {
@observable int price = 0;
@observable int qty = 0;
CalcElement.created() : super.created();
}
您可以定义聚合物表达式的双向变换器,它将转换String为int:
class StringToInt extends Transformer<String, int> {
String forward(int i) => '$i';
int reverse(String s) => int.parse(s);
}
然后,你的属性添加asInteger到您PolymerElement(你可以alternativelly全球新增变压器在描述下这个对方的回答).
// calc.dart
import 'package:polymer/polymer.dart';
@CustomTag('my-calc')
class CalcElement extends PolymerElement {
@observable int price = 0;
@observable int qty = 0;
final asInteger = new StringToInt();
CalcElement.created() : super.created();
}
最后使用这个变压器:
<!-- calc.html -->
<polymer-element name="my-calc">
<template>
<label>Price</label>
<input value='{{ price | asInteger }}'>
<label>Qty</label>
<input value='{{ qty | asInteger }}'>
....
</template>
<script type="application/dart" src="calc.dart"></script>
</polymer-element>
| 归档时间： |
|
| 查看次数： |
849 次 |
| 最近记录： |