Bindable link target?

[masterjg]

Not sure what is the easiest way to bind link target?

with ui.link(target = app.storage.user.get("auth.url", "")):
    ui.button("JOIN US", icon="fa-brands fa-x-twitter", color="blue-grey-7")

this is what I have. But since auth.url value is set async later time than content is rendered it never changes until I reload web. Surely there should be something like ui.link().bind_from("target", app.store.user, "auth.url") right? like bindable attributes that are not only text, value, visibility?

[falkoschindler]

Hi @masterjg,

At the moment there is no bindable target property in ui.link. But you can achieve either use a generic binding function

link = ui.link('Link')

binding.bind_to(app.storage.user, 'auth.url', link.props, 'href')

ui.button('Change URL', on_click=lambda: app.storage.user.update({'auth.url': 'https://www.google.com'}))

or simply update the URL in a change event handler:

link = ui.link('Link')

@app.storage.user.on_change
def on_change():
    link.props.update(href=app.storage.user.get('auth.url', ''))

ui.button('Change URL', on_click=lambda: app.storage.user.update({'auth.url': 'https://www.google.com'}))

[evnchn]

At the moment there is no bindable target property in ui.link

Another PR like #5512 ?

[masterjg]

ah! binding.bind_to(app.storage.user, "auth.uri", link.props, "href") achieved what I wanted. Thanks!

[masterjg]

P.s> maybe it would be good idea to expose generic binding method in each element
ui.whatever().bind_from(target_object, target_name, attribute_name)

[evnchn]

I'm not sure if it is helpful.

I don't have a better way to put this, but the bind_*_from methods are already very "dumb" of a function.

nicegui/nicegui/elements/mixins/text_element.py

Lines 38 to 56 in 0719dfc

	def bind_text_from(self,
	target_object: Any,
	target_name: str = 'text',
	backward: Optional[Callable[[Any], Any]] = None, *,
	strict: Optional[bool] = None,
	) -> Self:
	"""Bind the text of this element from the target object's target_name property.
	The binding works one way only, from the target to this element.
	The update happens immediately and whenever a value changes.
	:param target_object: The object to bind from.
	:param target_name: The name of the property to bind from.
	:param backward: A function to apply to the value before applying it to this element (default: identity).
	:param strict: Whether to check (and raise) if the target object has the specified property (default: None,
	performs a check if the object is not a dictionary, *added in version 3.0.0*).
	"""
	bind_from(self, 'text', target_object, target_name, backward, self_strict=False, other_strict=strict)
	return self

With bind_from method, it is literally just a direct passthrough to bind_from function, and so we are increasing the API surface with no real gains...

[masterjg]

so maybe there's no point then in having restricted methods to value, text, etc if one generic would be better? there may be other attributes that people like to have reactive

[evnchn]

A plain bind_from is easy to mis-call by messing up the 2nd param, though...