绑定属性

NiceGUI 能够直接将 UI 元素绑定到模型。可以对 UI 元素的 text、value 或 visibility 属性以及（嵌套的）类属性进行绑定。每个元素都提供了如 bind_value 和 bind_visibility 之类的方法来创建与相应属性的双向绑定。要定义单向绑定，请使用这些方法的 _from 和 _to 变体。只需将这些方法的参数设置为模型的属性即可创建绑定。值将在立即更新，并在其中一个值更改时更新。

from nicegui import ui

class Demo:
    def __init__(self):
        self.number = 1

demo = Demo()
v = ui.checkbox('visible', value=True)
with ui.column().bind_visibility_from(v, 'value'):
    ui.slider(min=1, max=3).bind_value(demo, 'number')
    ui.toggle({1: 'A', 2: 'B', 3: 'C'}).bind_value(demo, 'number')
    ui.number().bind_value(demo, 'number')

# ui.run()

绑定到字典

在这里，我们将标签的文本绑定到一个字典。

from nicegui import ui

data = {'name': 'Bob', 'age': 17}

ui.label().bind_text_from(data, 'name', backward=lambda n: f'Name: {n}')
ui.label().bind_text_from(data, 'age', backward=lambda a: f'Age: {a}')

ui.button('Turn 18', on_click=lambda: data.update(age=18))

# ui.run()

<nicegui.elements.button.Button at 0x7f1d139792d0>

绑定到变量

在这里，我们将 datepicker 的值绑定到普通变量。因此，我们使用了包含所有全局变量的字典 globals()。这个示例基于官方的 datepicker 示例。

from nicegui import ui

date = '2023-01-01'

with ui.input('Date').bind_value(globals(), 'date') as date_input:
    with ui.menu() as menu:
        ui.date(on_change=lambda: ui.notify(f'Date: {date}')).bind_value(date_input)
    with date_input.add_slot('append'):
        ui.icon('edit_calendar').on('click', menu.open).classes('cursor-pointer')

# ui.run()

绑定到存储

绑定也可以与 app.storage 一起使用。在这里，我们在访问之间存储 textarea 的值。同一个用户的所有标签页之间也会共享这个笔记。

from nicegui import app, ui

@ui.page('/')
def index():
    ui.textarea('This note is kept between visits').classes('w-full').bind_value(app.storage.user, 'note')

# ui.run()