高分子镖：数据绑定整数值String类型的属性 [英] Polymer dart: Data bind integer value to String attribute
问题描述
我想绑定到一个String属性的整数。说究竟，我想发布的整型变量绑定到文本输入元素的值属性。
I am trying to bind an integer to a String attribute. To say exactly, I am trying to bind a published integer variable to the value attribute of the text input element.
@published int数据= 0;
@published int data = 0;
<input type="number" value="{{data}}">
显然，字符串的一个引用得到存储在什么被认为是一个整数。
Obviously, a reference of String is getting stored in what is supposed to be an integer.
我试图使用过滤器来解决这个问题，但还是没能得到它的工作：
I tried to use filter to solve this issue, but still could get it to work:
int integerize(Object a) {
int ret = 0;
if (a is String) {
try {
ret = int.parse(a);
} on FormatException catch (e) {
}
} else if( a is int) {
ret = a;
}
return ret;
}
<input type="number" value="{{data | integerize}}">
所以我切换到不使用此绑定。使用绑定有人能提出一个更好的，有效的解决方案？
So I switched to not using binding for this. Can somebody suggest a better, efficient solution using binding?
推荐答案
对于聚合物1.0.0 这个工作对我罚款
创建可重用的行为，或者只是添加 convertToNumeric（）来的聚合物元素：
Create a reusable behavior or just add the convertToNumeric() to your Polymer element:
@HtmlImport('app_element.html')
library app_element;
import 'dart:html' as dom;
import 'package:web_components/web_components.dart' show HtmlImport;
import 'package:polymer/polymer.dart';
@behavior
abstract class InputConverterBehavior implements PolymerBase {
@reflectable
void convertToInt(dom.Event e, _) {
final input = (e.target as dom.NumberInputElement);
double value = input.valueAsNumber;
int intValue =
value == value.isInfinite || value.isNaN ? null : value.toInt();
notifyPath(input.attributes['notify-path'], intValue);
}
}
应用行为的元素：
Apply the behavior to your element:
@PolymerRegister('app-element')
class AppElement extends PolymerElement with InputConverterBehavior {
AppElement.created() : super.created();
@property int intValue;
}
在你的元素的HTML配置输入元素：
In HTML of your element configure the input element:
- 绑定
值为您的属性：值=[的intValue]所以输入元素被更新该属性发生变化时 - 设置事件通知调用转换器，当值改变
上输入=convertToNumeric通知路径=的intValue，其中的intValue是属性与数值更新的名称。
- bind
valueto your property:value="[[intValue]]"so the input element gets updated when the property changes - set up event notification to call the converter when the value changes
on-input="convertToNumeric" notify-path="intValue"whereintValueis the name of the property to update with the numeric value.
<!DOCTYPE html>
<dom-module id='app-element'>
<template>
<style>
input:invalid {
border: 3px solid red;
}
</style>
<input type="number" value="[[intValue]]"
on-input="convertToInt" notify-path="intValue">
<!-- a 2nd element just to demonstrate that 2-way-binding -->
<input type="number" value="[[intValue]]"
on-input="convertToInt" notify-path="intValue">
</template>
</dom-module>
另一种方法
创建一个财产的getter / setter：
Create a property as getter/setter:
int _intValue;
@property int get intValue => _intValue;
@reflectable set intValue(value) => convertToInt(value, 'intValue');
创建行为，或直接添加的功能，你的元素
Create a behavior or add the function directly to your element
@behavior
abstract class InputConverterBehavior implements PolymerBase {
void convertToInt(value, String propertyPath) {
int result;
if (value == null) {
result = null;
} else if (value is String) {
double doubleValue = double.parse(value, (_) => double.NAN);
result =
doubleValue == doubleValue.isNaN ? null : doubleValue.toInt();
} else if (value is int) {
result = value;
} else if (value is double) {
result =
value == value.isInfinite || value.isNaN ? null : value.toInt();
}
set(propertyPath, result);
}
}
这样，您就可以使用相同的标记作为文本输入字段
This way you can use the same markup as for text input fields
<input type="number" value="{{intValue::input}}">
或者，如果你想延迟属性的更新，直到输入字段保留
or if you want to delay the update of the property until the input field is left
<input type="number" value="{{intValue::change}}">
这篇关于高分子镖：数据绑定整数值String类型的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
