昨天透過玩家卡片 demo，示範了怎麼取得欄位與修改資料。其中用了 autoBind: true，讓 runtime 自動完成綁定。今天把這段流程拆開，看看取得 View Model、建立 Instance，以及綁定分別怎麼寫。

以下沿用 High-level API，r 代表已完成載入的 Rive instance，程式片段都在 onLoad 裡執行。

取得 View Model

假設設計師將玩家卡片的 View Model 命名為 PlayerCard，就用名稱取得它：

const vm = r.viewModelByName("PlayerCard");

如果要跟著目前 Artboard 在 Editor 的設定走，也可以取得預設 View Model：

const vm = r.defaultViewModel();

兩種方式擇一即可。這時拿到的 vm 是資料結構，接著還要建立存放實際資料的 Instance。官方說明

建立 Instance

常用的建立方式如下，差別在於初始資料從哪裡來：

例如，要沿用設計師設定的預設資料，就接著寫：

const vmi = vm.defaultInstance();

這裡要注意，instance() 會從型別預設值開始。如果想沿用設計師填好的姓名與分數，就改用 defaultInstance() 或 instanceByName()，以對應資料建立 Instance。官方說明

把 Instance 綁定到畫面

有了 vmi，最後透過 bindViewModelInstance() 完成綁定。手動處理時，在建立 r 的設定中使用 autoBind: false，再把前面的步驟接起來：

const vm = r.viewModelByName("PlayerCard");
if (!vm) throw new Error("找不到 PlayerCard");

const vmi = vm.defaultInstance();
if (!vmi) throw new Error("找不到 Default Instance");

r.bindViewModelInstance(vmi);

到這裡，這份 Instance 就交給目前的 State Machine 與 Artboard 使用，可以接著修改欄位。官方 API 說明

如果沿用昨天的 autoBind: true，runtime 會使用 Artboard 預設 View Model 的 Default Instance 完成綁定，直接取得它就好：

const vmi = r.viewModelInstance;
if (!vmi) throw new Error("請確認 Editor 的預設綁定設定");

兩條流程選一條即可。一般更新資料時，沿用已綁定的 Instance 修改 .value，就不需要每次重新綁定。

串接前，除了欄位名稱與型別，也要跟設計師確認 View Model 名稱，以及預期使用哪份初始資料。把這些約定清楚，就能少一輪「為什麼拿到的值不一樣」的確認。

明天接著介紹 number、boolean、trigger，看看怎麼更新數值、切換狀態與觸發互動。