美文网首页
(三、8)双向数据绑定

(三、8)双向数据绑定

作者: 鹿小纯0831 | 来源:发表于2018-10-22 11:26 被阅读6次

使用单向数据绑定,您可以在属性上设置值,并设置对该属性中的更改作出反应的侦听器:

<CheckBox
    android:id="@+id/rememberMeCheckBox"
    android:checked="@{viewmodel.rememberMe}"
    android:onCheckedChanged="@{viewmodel.rememberMeChanged}"
/>

双向数据绑定提供了此过程的快捷方式:

<CheckBox
    android:id="@+id/rememberMeCheckBox"
    android:checked="@={viewmodel.rememberMe}"
/>

@ = {}表示法(主要包括“=”符号)接收属性的数据更改并同时侦听用户更新。

为了对支持数据中的更改做出反应,您可以使布局变量成为Observable的实现,通常是BaseObservable,并使用@Bindable注释,如以下代码片段所示:

public class LoginViewModel extends BaseObservable {
    // private Model data = ...

    @Bindable
    public Boolean getRememberMe() {
        return data.rememberMe;
    }

    public void setRememberMe(Boolean value) {
        // Avoids infinite loops.
        if (data.rememberMe != value) {
            data.rememberMe = value;

            // React to the change.
            saveData();

            // Notify observers of a new value.
            notifyPropertyChanged(BR.remember_me);
        }
    }
}

由于bindable属性的getter方法称为getRememberMe(),因此属性的相应setter方法会自动使用名称setRememberMe()。

有关使用BaseObservable和@Bindable的更多信息,请参阅使用可观察数据对象。

一、使用自定义属性进行双向数据绑定

该平台为最常见的双向属性和更改侦听器提供双向数据绑定实现,您可以将其用作应用程序的一部分。 如果要对自定义属性使用双向数据绑定,则需要使用@InverseBindingAdapter和@InverseBindingMethod注释。

例如,如果要在名为MyView的自定义视图中对“time”属性启用双向数据绑定,请完成以下步骤:

  1. 注释设置初始值的方法,并在使用@BindingAdapter更改值时进行更新:
@BindingAdapter("time")
public static void setTime(MyView view, Time newValue) {
    // Important to break potential infinite loops.
    if (view.time != newValue) {
        view.time = newValue;
    }
}

2.使用@InverseBindingAdapter注释从视图中读取值的方法:

@InverseBindingAdapter("time")
public static Time getTime(MyView view) {
    return view.getTime();
}

此时,数据绑定知道数据更改时要执行的操作(它调用使用@BindingAdapter注释的方法)以及视图属性更改时调用的内容(它调用InverseBindingListener)。 但是,它不知道属性何时或如何更改。

为此,您需要在视图上设置一个侦听器。 它可以是与自定义视图关联的自定义侦听器,也可以是通用事件,例如失去焦点或文本更改。 将@BindingAdapter注释添加到为该属性的更改设置侦听器的方法:

@BindingAdapter("app:timeAttrChanged")
public static void setListeners(
        MyView view, final InverseBindingListener attrChange) {
    // Set a listener for click, focus, touch, etc.
}

侦听器包含InverseBindingListener作为参数。 您可以使用InverseBindingListener告知数据绑定系统该属性已更改。 然后,系统可以开始使用@InverseBindingAdapter调用注释方法,依此类推。

注意:每个双向绑定都会生成一个综合事件属性。 此属性与基本属性具有相同的名称,但它包含后缀“AttrChanged”。 合成事件属性允许库创建使用@BindingAdapter注释的方法,以将事件侦听器关联到View的相应实例。

在实践中,该侦听器包括一些非平凡的逻辑,包括用于单向数据绑定的侦听器。 有关示例,请参阅文本属性更改的适配器TextViewBindingAdapter。

二、转换器

如果绑定到View对象的变量需要在显示之前以某种方式进行格式化,转换或更改,则可以使用Converter对象。

例如,使用显示日期的EditText对象:

<EditText
    android:id="@+id/birth_date"
    android:text="@={Converter.dateToString(viewmodel.birthDate)}"
/>

viewmodel.birthDate属性包含Long类型的值,因此需要使用转换器对其进行格式化。
因为正在使用双向表达式,所以还需要一个逆转换器让库知道如何将用户提供的字符串转换回后备数据类型,在本例中为Long。 此过程通过将@InverseMethod注释添加到其中一个转换器并使此注释引用逆转换器来完成。 以下代码段中显示了此配置的示例:

public class Converter {
    @InverseMethod("stringToDate")
    public static String dateToString(EditText view, long oldValue,
            long value) {
        // Converts long to String.
    }

    public static long stringToDate(EditText view, String oldValue,
            String value) {
        // Converts String to long.
    }
}

三、使用双向数据绑定的无限循环

使用双向数据绑定时,请注意不要引入无限循环。 当用户更改属性时,将调用使用@InverseBindingAdapter注释的方法,并将值分配给backing属性。 反过来,这将调用使用@BindingAdapter注释的方法,这将触发对使用@InverseBindingAdapter注释的方法的另一个调用,依此类推。

因此,通过比较使用@BindingAdapter注释的方法中的新旧值来打破可能的无限循环非常重要。

四、双向属性

当您使用下表中的属性时,该平台为双向数据绑定提供内置支持。

相关文章

  • Vue之表单双向数据绑定和组件

    三、表单双向数据绑定和组件 目录:双向数据绑定、组件 1.双向数据绑定 1)什么是双向数据绑定Vue.js是一个M...

  • (三、8)双向数据绑定

    使用单向数据绑定,您可以在属性上设置值,并设置对该属性中的更改作出反应的侦听器: 双向数据绑定提供了此过程的快捷方...

  • Vue 中的双向数据绑定

    双向绑定 单向数据流 双向绑定 or 单向数据流 Vue 是单向数据流,不是双向绑定 Vue 的双向绑定是语法糖 ...

  • vue 面试汇总(更新中...)

    1.说说对双向绑定的理解 1.1、双向绑定的原理是什么 我们都知道Vue是数据双向绑定的框架,双向绑定由三个重要部...

  • 美团面试总结

    1.angularJS双向绑定实现2.双向绑定的其他实现3.使用get,set实现双向数据绑定4.三列布局实现的三...

  • 前端三大框架:数据绑定与数据流

    目录序言单向数据绑定 vs 双向数据绑定单向数据流 vs 双向数据流数据流与数据绑定参考1. 序言在前端三大主流的...

  • Vue双向数据绑定v-model

    v-model 数据双向绑定用作双向数据绑定 一、组件内部双向数据绑定 1、在实例的data中,设置content...

  • Vue入门(二)——数据绑定

    一、什么是双向数据绑定 双向数据绑定是Vue的核心功能之一。所谓双向数据绑定是指:HTML标签上的数据绑定到Vue...

  • [转] DataBinding 数据绑定

    数据绑定分为单项绑定和双向绑定两种。单向绑定上,数据的流向是单方面的,只能从代码流向 UI;双向绑定的数据是双向的...

  • 02Vue.js的数据绑定

    理解Vue的双向数据绑定 Vue有一个显著的地方就是它拥有双向数据绑定功能,那么何为双向数据绑定呢?双向是指:HT...

网友评论

      本文标题:(三、8)双向数据绑定

      本文链接:https://www.haomeiwen.com/subject/jagwzftx.html