Binding label to nested pydantic data class

[wriga049]

First Check

• I added a very descriptive title here.
• I have checked the FAQs for a similar question and didn't find it.
• I used the GitHub search to find a similar question and didn't find it.
• I searched the NiceGUI documentation, with the integrated search.
• I already searched online "How to X in NiceGUI" and didn't find any information.

Example Code

from nicegui import ui
from pydantic import BaseModel

class Child(BaseModel):
    value: int = 3

class Parent(BaseModel):
    child_value: Child = Child()
    other_value: int = 99
    

def change_value_model():
    p.child_value = Child(value=p.child_value.value + 1) 
    p.other_value += 1
    print(f"########### Proves the child is updating {p.child_value.value}")

p = Parent()

ui.label("This updates on button click")
ui.label().bind_text_from(p, 'other_value')
ui.label("None of these update on button click")
ui.label(p.child_value.value)
ui.label().bind_text_from(p.child_value, 'value')
ui.label().bind_text_from(p.child_value, 'value', backward=lambda v: v)
ui.label().bind_text(
    p.child_value, 'value',
    forward=lambda v: v, # when writing to pydantic model
    backward=lambda v: v # when reading from pydantic model
)

ui.button("Increment", on_click=change_value_model)
ui.run(host="127.0.0.1", port=8085)

Description

Start the app. The labels display the initialized values
Clicking the Increment button increments the values in the object.
For the label bound to the value in the upper-most parent value, the label updates. This is as I'd expect.
For the label bound to the lower-most child value, the labels do not update. This is not as I'd expect.

I can confirm the child value is getting updated through the print statements to the terminal. I tried binding a few different ways, but no love.

From my reading, it looks like other control types, like ui.range(), might behave as I'd expect.

Just to add to the mystery, if I add a ui.number() control and bind it to the child value, I can use it to update the labels bound to the child value:

ui.number().bind_value(
    p.child_value, 'value',
    forward=lambda v: v, # when writing to pydantic model
    backward=lambda v: v # when reading from pydantic model
)

What am I missing to understand better why the labels bound to the child don't update when I update the data object?

NiceGUI Version

2.20.0

Python Version

3.11.9

Browser

Chrome

Operating System

Windows

Additional Context

Further testing shows that if I use a nested dict as my data source, the labels bound to a child value update as I'd expect. E.g.

from nicegui import ui

def change_value_model():
    p2['child_value']['value'] += 1
    p2['other_value'] += 1

p2 = {"other_value": 99, "child_value": {"value": 3}}

ui.label("This updates on button click")
ui.label().bind_text_from(p2, 'other_value')
ui.label("These update on button click")
#ui.label(p2['child_value']['value'])
ui.label().bind_text_from(p2['child_value'], 'value')
ui.label().bind_text_from(p2['child_value'], 'value', backward=lambda v: v)
ui.label().bind_text(
    p2['child_value'], 'value',
    forward=lambda v: v, # when writing to pydantic model
    backward=lambda v: v # when reading from pydantic model
)


ui.button("Increment", on_click=change_value_model)
ui.run(host="127.0.0.1", port=8085)

I'll also add that if I instantiate the label as a python variable, and then use a function to re-set the text, that works as expected.

from nicegui import ui
from pydantic import BaseModel

class Child(BaseModel):
    value: int = 3

class Parent(BaseModel):
    child_value: Child = Child()
    other_value: int = 99

def change_value_model():
    p.child_value = Child(value=p.child_value.value + 1) 
    p.other_value += 1
    print(f"########### Proves the child is updating {p.child_value.value}")
    derived.set_text(str(p.child_value.value))

p = Parent()

ui.label("This updates on button click")
derived = ui.label().bind_text(p.child_value, 'value')

ui.button("Increment", on_click=change_value_model)
ui.run(host="127.0.0.1", port=8085)

[evnchn]

From how I understand it, you're creating a new child and tossing the old one. Binding does not persist after that.

You may want to modify the existing child?

[wriga049]

Switching to p.child_value.value += 1 instead of p.child_value = Child(value=p.child_value.value + 1) did the trick.

Thank you @evnchn