Detect View Model Property Changes in Code

5m 47sPublished Aug 22, 2025

SummaryVersion Notes (Draft)

This course covers the advanced bidirectional interaction flow of the Rive runtime: while controlling Rive via code is a standard technique, driving system code reactively from a Rive file opens up powerful implementation patterns. Through a practical "click to copy email" button workflow, the instructor demonstrates how to capture and listen for inner property modifications inside the View-Model layer. This "design-driven-code" decoupled architecture isolates heavy visual transition logic from the functional logic (such as Web API invocations or analytical logging), providing optimal multi-platform collaborative efficiency.

Bidirectional Functional Topologies: Rive 101 previously highlighted "controlling elements from code" (Code → Rive), whereas tracking property occurrences inverts this to "controlling software behaviors from layout assets" (Rive → Code). This architecture streamlines analytics event capturing, custom audio playback triggers, and complex web form updates.
Property Event API (.on Listener Patterns):
- Extracted properties from the View-Model instance allow direct attachment of the .on(callback) method.
- Compared to traditional runtime event tracking (which requires listening to structural state changes via StateChanged and parsing long conditional event strings), subscribing directly to a View-Model input via .on keeps consumer code cleaner, highly structured, and disconnected from raw layout states.
Modern Sandbox Security Policy Barriers (Clipboard API):
- Operating navigator.clipboard.writeText commands requires an established Secure Context, indicating production deployment must follow the https:// protocol schema (with explicit exemptions granting http://localhost or local fallback loopbacks testing access).
- Web platforms dictate that clipboard manipulations require a direct user-initiated transaction (User Gesture). Because Rive components relay mouse coordinates down to their internal State Machine layers instantly, the execution cycle preserves intent context perfectly, passing browser runtime security validation rules.
Toolchain Quirks (Live Preview Extension Mitigation): The integrated live layout viewer inside modern text editors operates inside heavily guarded iframe boundaries to block unintended workstation filesystem writes. When testing sophisticated frontend components utilizing hardware/host features, always verify execution behavior inside an uncontained environment (e.g., Google Chrome or Safari) rather than sandboxed development tools.

📌 Key Points

Listen for property changes in code to drive reactive updates and app logic.

📝 Notes

Markdown

0 chars

Step by Step

00:00:04

Concept Breakdown and Business Context Showcase

The instructor introduces the architectural pattern of driving code via Rive asset events and previews a button that, once clicked, plays a state machine animation and simultaneously executes a clipboard write text operation.
00:00:46

Enabling Instance Exports and Fetching RIV Asset

Select the View-Model container inside the Rive editor, ensure Export Instance is toggled active, and navigate to Export -> Export for Runtime to download copy email.riv with its file extension explicitly included.
00:01:12

Initializing the Workspace Folder Structure in IDE

Launch VS Code, load the directory hosting the newly exported .riv file, create an empty index.html document, and map out the standard Rive runtime initialization boilerplate code blocks.
00:01:54

Validating String Configuration Parameters

Inspect the boilerplate setup at around line 18, cross-checking that the asset file target path, the target canvas artboard name, and the selected stateMachines identifier align string-for-string with the Rive source layout.
00:02:19

Booting Live Preview Extension for Base Verification

Open the live-updating workspace browser pane using the Live Preview tool to guarantee the Rive canvas maps correctly into the HTML space and registers immediate hovering or clicking states.
00:02:37

Extracting the Active View-Model Runtime Reference

Navigate directly under the onload execution handle callback and establish a clean local reference pointer by inputting let vmi = r.viewModelInstance; leveraging the main Rive driver entity r.
00:03:35

Isolating and Capturing the Target Trigger Property

Declare a specialized target constant using let trigProperty = vmi.trigger("trig"); to fetch the explicit View-Model trigger mechanism named "trig" inside the Rive workspace layout.
00:04:18

Constructing the Functional Core Clipboard Callback

Define a dedicated script execution sequence named function copyEmail() { ... } utilizing the asynchronous global web runtime subsystem call: navigator.clipboard.writeText("your_email@example.com");.
00:04:46

Registering the Property Update Listener Hook

Bind the structural listener by coding trigProperty.on(copyEmail);. This instruction enforces that whenever the underlying model's trigger fires from the asset UI layer, the JS container intercepts it and fires copyEmail.
00:05:06

Bypassing Preview Sandbox via Native Browser Routing

Recognize that VS Code's integrated web container disables peripheral access vectors like clipboard manipulation; use the bottom panel's Port controls to forward and review the layout via an external native browser engine.
00:05:26

End-to-End System Validation and Wrap-up

Press the interactive element inside the actual browser window and perform a copy-paste check to confirm that the complete Rive-to-code feedback pipeline works flawlessly, providing production readiness.