个人中心
gpt4 book ai didi

data-binding - 聚合物 Dart : Data bind integer value to String attribute

转载 作者：行者123 更新时间：2023-12-03 03:18:48 25 4
gpt4 key购买 nike

我正在尝试将整数绑定(bind)到 String 属性。确切地说，我正在尝试将已发布的整数变量绑定(bind)到文本输入元素的 value 属性。

@published int 数据 = 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}}">

所以我切换到不为此使用绑定(bind)。有人可以建议使用绑定(bind)的更好、更有效的解决方案吗？

最佳答案

对于 聚合物 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);
  }
}

将行为应用于您的元素: 
@PolymerRegister('app-element')
class AppElement extends PolymerElement with InputConverterBehavior {
  AppElement.created() : super.created();

  @property int intValue;
}

在元素的 HTML 中配置输入元素:
  • 绑定(bind) value到您的属性(property):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>

    另一种方法

    创建一个属性作为 getter/setter: 
      int _intValue;
      @property int get intValue => _intValue;
      @reflectable set intValue(value) => convertToInt(value, 'intValue');

    创建行为或将功能直接添加到您的元素 
    @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}}">

    关于data-binding - 聚合物 Dart : Data bind integer value to String attribute，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25611667/

    25 4 0
    文章推荐： dart - AngularDart:如何在AngularJS中强制类似于$ digest的页面重新渲染？
    文章推荐： dart - 如何从全局命名空间访问 Polymer 元素中的 DOM 元素？
    文章推荐： gcc - 如何将android-ndk示例切换为使用gcc而不是clang？
    文章推荐： dart - DART 语言通知 - html/浏览器/webkit/桌面
    行者123
    个人简介

    我是一名优秀的程序员,十分优秀！

    滴滴打车优惠券免费领取
    滴滴打车优惠券
    全站热门文章
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com