폴리머 다트 : 데이터가 문자열 속성에 정수 값을 바인딩합니다.

문자열 속성에 정수를 바인딩하려고합니다. 정확히 말하면, 게시 된 정수 변수를 텍스트 입력 요소의 value 속성에 바인딩하려고합니다.폴리머 다트 : 데이터가 문자열 속성에 정수 값을 바인딩합니다.

@published int data = 0;

<input type="number" value="{{data}}">

분명히 String의 참조가 정수로 간주되어 저장됩니다.

나는이 문제를 해결하기 위해 필터를 사용하려고했지만 여전히 일을 얻을 수 :

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}}">

그래서 나는이 바인딩을 사용하지 않는로 전환. 누군가가 바인딩을 사용하여보다 효율적이고 효율적인 솔루션을 제안 할 수 있습니까?

출처

2014-09-01 Ravi Teja Gudapati

를 들어 폴리머 1.0.0이 나를 위해 잘 작동

재사용 가능한 동작을 만들거나 당신의 폴리머 요소에 convertToNumeric()을 추가

를

@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); 
    } 
}

동작 적용 t 오 당신의 요소 : 귀하의 재산에

바인드 value :

@PolymerRegister('app-element') 
class AppElement extends PolymerElement with InputConverterBehavior { 
    AppElement.created() : super.created(); 

    @property int intValue; 
}

당신의 요소의 HTML에서 입력 요소를 구성 value="[[intValue]]" 때문에 속성이

이벤트를 설정 변경할 때 입력 요소가 업데이트됩니다 값이 변경 될 때 변환기를 호출하는 알림 on-input="convertToNumeric" notify-path="intValue" 여기서 intValue은 숫자 값으로 업데이트 할 속성의 이름입니다.

<!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>

다른 방법

이 게터/세터와 같은 속성 만들기 :

int _intValue; 
    @property int get intValue => _intValue; 
    @reflectable set intValue(value) => convertToInt(value, 'intValue');

이 동작을 만들거나 요소

에 직접 함수를 추가를,210

@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); 
    } 
}

텍스트 입력을위한 같은 마크 업을 사용할 수있는이 방법은

<input type="number" value="{{intValue::input}}">

필드 또는 속성의 업데이트를 지연 할 경우 입력 필드는 왼쪽 때까지

<input type="number" value="{{intValue::change}}">

출처

2015-10-12 08:49:17

이것은 에 해당합니다. 폴리머 < = 0.16입니다. Polymer> = 1.0 내 다른 대답을 참조하십시오.

HTML 특성은 문자열 값만 저장합니다. 당신이 할 수있는 것은 바인딩을 위해 getter/setter를 사용하고 값이 설정 될 때 파싱하는 것입니다.

@observable 
int data; 

@ComputedProperty('data') // haven't tried this but should work - see comments on http://japhr.blogspot.co.at/2014/08/whats-difference-between-attribute-and.html 
@observable 
get dataValue => data; 
set dataValue(val) { 
    if(val == null) { 
    data = 0; 
    } else if(val is num) { 
    data = val.toInt(); 
    } else if(val is String) { 
    data = num.parse(val, (v) => 0).toInt(); 
    } else { 
    data = 0; 
    } 
}

또는 변압기 또는 맞춤 중합체를 사용하는 등
은 polymer dart input binding int properties

대체 approache 은 (다트 중합체 수도 0.16) 1.0 다트 폴리머를 사용

app_element 설명 연산 식 .dart

,210

@HtmlImport('app_element.html') 
library _template.web.app_element; 

import 'dart:html' as dom; 
import 'package:web_components/web_components.dart' show HtmlImport; 
import 'package:polymer/polymer.dart'; 

@PolymerRegister('app-element') 
class AppElement extends PolymerElement { 
    AppElement.created() : super.created(); 

    @property int intValue; 
    @property String stringValue; 

    @reflectable 
    valueInputHandler(dom.Event event, [_]) { 
    var input = (event.target as dom.NumberInputElement); 
    var value = input.valueAsNumber; 
    if (!value.isNaN && !value.isInfinite) { 
     set('intValue', value.toInt()); 
     input.setCustomValidity(''); 
    } else { 
     // just to get the `:invalid` pseudo-class for styling 
     input.setCustomValidity('Not a number.'); 
    } 
    } 
}

app_element.html

<!DOCTYPE html> 
<dom-module id='app-element'> 
    <template> 
    <style> 
     input:invalid { 
     border: 3px solid red; 
     } 
    </style> 
    <input type="number" 
      value="{{stringValue::input}}" 
      on-input="valueInputHandler" > 
    <div>stringValue: <span>{{stringValue}}</span></div> 
    <div>intValue:<span>{{intValue}}</span></div> 
    </template> 
</dom-module>

출처

2014-09-01 19:10:34

폴리머 다트 : 데이터가 문자열 속성에 정수 값을 바인딩합니다.

답변

관련 문제