8.7 版本发布—WinterCG 兼容性第一部分
了解更多

Observable 是 @nativescript/core 中的基本构建块。

注意

不要与 rxjs Observable 混淆，NativeScript 中的 Observable 早于 rxjs 本身，并且名称一直保留至今。如果您希望我们将来重命名它，请随时通过 RFC 讨论 提出。

Observable 在 NativeScript 中启用数据绑定方面发挥着至关重要的作用。它是连接用户界面 (UI) 和 ViewModel 中底层数据的关键组件。通过将 Observable 的实例设置为 Page 或布局容器的 bindingContext 属性，您可以建立一个无缝连接，从而驱动 NativeScript 中的数据绑定。

简单来说，Observable 允许您轻松地将应用程序的 UI 元素与底层数据的更改同步和更新。它充当桥梁，在数据发生修改时通知 UI，确保 UI 与最新值保持同步。这使得构建动态和响应式界面变得方便，因为数据的更改将自动触发 UI 中相应的更新。

通过利用 Observable 和数据绑定的强大功能，您可以轻松创建交互式且响应式的 NativeScript 应用程序。

如何使用 Observable ​

以下部分展示了 Observable 的不同使用方法。

通过子类化创建 Observable ​

创建一个扩展 Observable 的类，如下所示

ts
export class HelloWorldModel extends Observable {
  name = 'Suzan Tomas'
  fruits = ['Chirimoya']

  constructor() {
    super()

    this.on('propertyChange', (args: PropertyChangeData) => {
      if (args.propertyName == 'name') {
        this.fruits.unshift('Kaki')

        this.set('fruits', this.fruits)
      }
    })
  }

  onTap(args: EventDaya) {
    //handle the tap event
  }
}

您还可以使用 fromObject 或 fromObjectRecursive 函数从数据创建 Observable。

发出事件 ​

要发出自定义事件，请在 Observable 实例上调用 notify 方法

ts
observable.notify({
  eventName: 'custom-event',
})

为属性更改发出事件 ​

要为属性更改发出事件，请使用 notifyPropertyChange 方法

ts
this.fruits.unshift('Kaki')

this.notifyPropertyChange('fruits', this.fruits)

避免事件处理程序内存泄漏 ​

为了确保您的应用程序没有因不再需要的处理程序导致的内存泄漏，请使用 addWeakEventListener 函数

Observable API ​

构造函数 ​

ts
const observable = new Observable()

propertyChangeEvent ​

ts
observable.on(Observable.propertyChangeEvent, (args: PropertyChangeData) => {})

连接到 propertyChange 事件时使用的字符串值。

addEventListener() ​

ts
Observable.addEventListener(eventNames, callback: (data: EventData) => void, thisArg)

//or
observable.addEventListener(eventNames, callback: (data: EventData) => void, thisArg)

为指定的事件添加监听器。

  • eventNames 是一个逗号分隔的字符串，包含要监听的事件的名称。
  • callback 是在任何注册事件发生时调用的函数。
  • 可选：thisArg 是一个参数，将用作回调执行的 this 上下文

on() ​

ts
Observable.on(eventNames, callback: (data: EventData) => void, thisArg)

//or
observable.on(eventNames, callback: (data: EventData) => void, thisArg)

到 addEventListener 的快捷别名。

once() ​

ts
Observable.once(eventName, callback: (data: EventData) => void, thisArg)

//or
observable.once(eventName, callback: (data: EventData) => void, thisArg)

为指定的事件添加一次性监听器。

  • eventName 是要监听的事件的名称。
  • callback 是在事件发生时调用的函数。
  • 可选：thisArg 是一个参数，将用作回调执行的 this 上下文。

addWeakEventListener() ​

removeEventListener() ​

ts
Observable.removeEventListener(eventNames, callback, thisArg)

//or
observable.removeEventListener(eventNames, callback, thisArg)

删除指定事件名称的监听器。

  • eventNames 是一个逗号分隔的字符串，包含指定监听器监听的事件的名称。
  • 可选：callback 参数指向要删除的特定监听器。如果未定义，则将删除所有事件名称的监听器。
  • 可选：thisArg 是一个参数，用于搜索要删除的监听器的 this 上下文。

off() ​

ts
Observable.off(eventNames, callback, thisArg)
//or
observable.off(eventName, callback, thisArg)

到 removeEventListener 的快捷别名。

set() ​

ts
observable.set(propertyName, value)

使用提供的 value 更新指定的属性。

setProperty() ​

ts
observable.setProperty(propertyName, value)

使用提供的 value 更新指定的属性并引发 propertyChangeEvent

get() ​

ts
observable.get(propertyName)

使用提供的 value 更新指定的属性。

notify() ​

ts
observable.notify({
  eventName: 'some-event-name',
  object,
})

允许您手动发出事件（自定义或 NativeScript 提供的）

  • eventName 是要发出的事件的名称。
  • 可选：object 是已引发事件的 Observable 实例。

notifyPropertyChange() ​

ts
observable.notifyPropertyChange(propertyName, value, oldValue)

通知为 propertyChange 事件注册的所有监听器。

  • propertyName 是其值已更改的属性。
  • value 属性的新值。
  • 可选：oldValue 属性的旧值。

hasListeners() ​

ts
const hasListeners: boolean = observable.hasListeners(eventName)

检查是否为指定的事件名称注册了监听器。

fromObject() ​

ts
import { fromObject } from '@nativescript/core'

const observable: Observable = fromObject(obj)

创建一个 Observable 实例，并将其属性设置为指定对象的属性。

fromObjectRecursive() ​

ts
import { fromObjectRecursive } from '@nativescript/core'

const observable: Observable = fromObjectRecursive(obj)

创建一个 Observable 实例，并将其属性设置为指定对象的属性。对于提供的对象中的每个嵌套对象（数组和函数除外），它都会创建一个 Observable 实例。

上一页
ImageCache
下一页
Screen