昨天介紹了 Data Binding 的基本概念，今天直接看程式碼，示範怎麼把玩家姓名與分數傳進 Rive，以及資料改變時怎麼更新畫面。

以下使用 High-level API，假設 r 已設定 autoBind: true，View Model 也已建立並綁定 playerName（string）與 score（number）。初始化的程式放在 onLoad 裡執行。

取得欄位並設定資料

先透過 r.viewModelInstance 取得自動綁定的 Instance，再依照型別與 key 拿到欄位：

const vmi = r.viewModelInstance;
const playerName = vmi.string("playerName");
const score = vmi.number("score");

這裡拿到的是欄位物件，接著透過 .value 填入實際資料：

playerName.value = "小明";
score.value = 100;

這樣就把姓名設定為「小明」、分數設定為 100。設計師在 Editor 綁定好的文字，會跟著這些資料更新。官方 API 說明

資料改變時怎麼更新？

之後收到新的玩家資料，只要修改同一個欄位的 .value：

// 沿用前面取得的欄位，在收到新分數時更新
score.value = 110;

重點就是最後這一行。欄位取得後可以持續使用，不需要每次更新資料都重新建立 Instance 或重新綁定。這裡只是把分數從 100 改成 110，綁定的文字會在 runtime 下一次更新時反映結果。更新時機說明

語法就這樣而已。串接時先跟設計師約定好 key、型別與用途，前端就能依照這份約定填入資料。明天再整理取得 View Model、建立 Instance 與手動綁定的基本 API。