Implementing a `<text>` that mirrors a `<text-field>`?

[Jonah]

Simple question to clarify a fundamental concept for me:

How would I implement <text> whose content instantly reflects the value of a <text-field> on the same page. That is, any "change" event on the <text-field> should trigger a corresponding update on the <text>.

My two thoughts are...

1. Somehow use on-event? But I can't figure out how the event "payload" (the updated value of the <text-field>) would be transmitted...
2. Create a custom element, which would act as an island of state/interactivity. This is trivial to do directly in react.

More generally, I'd like to understand how the framework intends me to think about these kind of "local only" but interactive use cases. They seem to go against the grain of the hyperview model, where fetching new content, either from the server or page fragments, is the preferred method of updating the screen (just like a traditional web app). Is that a fair claim or am I missing the intended approach here?

[Florent Bonomo]

Hi @jonahx

You're right that events cannot carry a payload, so this mechanism won't help for your use case. I'll recommend your second approach.
Your understanding of the Hyperview approach is correct: the state used by the app is meant to be driven by the server, which means fetching new content to update the screen is required. Or in the case of existing page fragments, accepting these are pre-generated and therefore won't change until another server load is performed. Building custom components are, in most cases, the best solution when you need to deal with a client side driven state - basically when you need instant updates, and waiting for a server round trip is not desirable.