https://rivecn.com/assets/js/22172486.a17dbf86.js

1"use strict";(self.webpackChunkrive_docs=self.webpackChunkrive_docs||[]).push([[20403],{99380:(e,n,i)=>{i.r(n),i.d(n,{assets:()=>c,contentTitle:()=>l,default:()=>h,frontMatter:()=>r,metadata:()=>s,toc:()=>a});const s=JSON.parse('{"id":"Editor/Data Binding/View Models","title":"\u89c6\u56fe\u6a21\u578b\u548c\u5b9e\u4f8b","description":"\u89c6\u56fe\u6a21\u578b\u5b9a\u4e49\u6570\u636e\u7684\u7ed3\u6784\u3002\u5b83\u662f\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u84dd\u56fe\uff0c\u5305\u542b\u4e00\u7ec4\u5c5e\u6027\uff0c\u4f8b\u5982\u6c7d\u8f66\u7684\u989c\u8272\u3001\u901f\u5ea6\u548c\u635f\u574f\u7a0b\u5ea6\u3002","source":"@site/docs/Editor/Data Binding/View Models.md","sourceDirName":"Editor/Data Binding","slug":"/Editor/Data Binding/View Models","permalink":"/docs/Editor/Data Binding/View Models","draft":false,"unlisted":false,"tags":[],"version":"current","sidebarPosition":6,"frontMatter":{"sidebar_position":6,"title":"\u89c6\u56fe\u6a21\u578b\u548c\u5b9e\u4f8b"},"sidebar":"tutorialSidebar","previous":{"title":"\u72b6\u6001\u5316\u7ec4\u4ef6","permalink":"/docs/Editor/Data Binding/Stateful Components"},"next":{"title":"Property Groups","permalink":"/docs/Editor/Data Binding/Property Groups"}}');var t=i(74848),d=i(28453);const r={sidebar_position:6,title:"\u89c6\u56fe\u6a21\u578b\u548c\u5b9e\u4f8b"},l=void 0,c={},a=[{value:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b",id:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b",level:3},{value:"\u521b\u5efa\u548c\u7f16\u8f91\u5b9e\u4f8b",id:"\u521b\u5efa\u548c\u7f16\u8f91\u5b9e\u4f8b",level:2},{value:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",id:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",level:3},{value:"\u79fb\u9664\u5b9e\u4f8b",id:"\u79fb\u9664\u5b9e\u4f8b",level:3},{value:"\u5bfc\u51fa\u5b9e\u4f8b",id:"\u5bfc\u51fa\u5b9e\u4f8b",level:3},{value:"\u5c06\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u8fde\u63a5\u5230\u753b\u677f",id:"\u5c06\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u8fde\u63a5\u5230\u753b\u677f",level:2},{value:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",id:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",level:3},{value:"\u9644\u52a0\u5230\u753b\u677f\u7684\u5b9e\u4f8b",id:"\u9644\u52a0\u5230\u753b\u677f\u7684\u5b9e\u4f8b",level:3},{value:"\u4f5c\u4e3a\u5d4c\u5957\u5c5e\u6027\u7684\u5b9e\u4f8b",id:"\u4f5c\u4e3a\u5d4c\u5957\u5c5e\u6027\u7684\u5b9e\u4f8b",level:3},{value:"\u6709\u72b6\u6001\u7ec4\u4ef6",id:"\u6709\u72b6\u6001\u7ec4\u4ef6",level:3}];function o(e){const n={a:"a",admonition:"admonition",code:"code",h2:"h2",h3:"h3",img:"img",p:"p",pre:"pre",strong:"strong",table:"table",tbody:"tbody",td:"td",th:"th",thead:"thead",tr:"tr",...(0,d.R)(),...e.components},{Note:s,Step:r,Steps:l,Tip:c,YouTube:a}=n;return s||x("Note",!0),r||x("Step",!0),l||x("Steps",!0),c||x("Tip",!0),a||x("YouTube",!0),(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(n.p,{children:"\u89c6\u56fe\u6a21\u578b\u5b9a\u4e49\u6570\u636e\u7684\u7ed3\u6784\u3002\u5b83\u662f\u4e00\u4e2a\u53ef\u590d\u7528\u7684\u84dd\u56fe\uff0c\u5305\u542b\u4e00\u7ec4\u5c5e\u6027\uff0c\u4f8b\u5982\u6c7d\u8f66\u7684\u989c\u8272\u3001\u901f\u5ea6\u548c\u635f\u574f\u7a0b\u5ea6\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u6bcf\u4e2a\u5c5e\u6027\u90fd\u6709\u4e00\u79cd\u7c7b\u578b\uff0c\u4f8b\u5982 Number\u3001String\u3001Boolean\u3001Color\u3001Enum \u6216 List\uff08\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605",(0,t.jsx)(n.a,{href:"/docs/Editor/Data%20Binding/Property%20Types",children:"\u5c5e\u6027\u7c7b\u578b"}),"\uff09\u3002"]}),"\n",(0,t.jsx)(n.p,{children:"\u89c6\u56fe\u6a21\u578b\u672c\u8eab\u4e0d\u5b58\u50a8\u503c\u3002\u503c\u4f1a\u5b58\u50a8\u5728\u4e00\u4e2a\u6216\u591a\u4e2a\u7531\u8be5\u89c6\u56fe\u6a21\u578b\u521b\u5efa\u7684\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4e2d\u3002"}),"\n",(0,t.jsx)(n.p,{children:"\u4f8b\u5982\uff0c\u5982\u679c\u4f60\u6b63\u5728\u6784\u5efa\u4e00\u6b3e\u8d5b\u8f66\u6e38\u620f\uff0c\u4f60\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a Car \u89c6\u56fe\u6a21\u578b\uff0c\u5e76\u5305\u542b\u4ee5\u4e0b\u5c5e\u6027\uff1a"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:"Car (View Model)\n  color: Color\n  damage: number\n  make: string\n  speed: number\n"})}),"\n",(0,t.jsx)(n.p,{children:"\u4e00\u4e2a\u89c6\u56fe\u6a21\u578b\u53ef\u4ee5\u7528\u6765\u521b\u5efa\u591a\u4e2a\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u3002\u6bcf\u4e2a\u5b9e\u4f8b\u5171\u4eab\u76f8\u540c\u7684\u7ed3\u6784\uff0c\u4f46\u4f1a\u5b58\u50a8\u81ea\u5df1\u7684\u503c\u3002"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-jsx",children:'Car1 (View Model Instance)\n  color: 0xFFFF0000\n  damage: 0\n  make: "Subaru"\n  speed: 0\n\nCar2 (View Model Instance)\n  color: 0xFFFF00FF\n  damage: .9\n  make: "Honda"\n  speed: 0\n'})}),"\n",(0,t.jsx)(n.p,{children:"\u7136\u540e\uff0c\u4f60\u53ef\u4ee5\u5c06\u5b9e\u4f8b\u4e2d\u7684\u5c5e\u6027\u7ed1\u5b9a\u5230\u8bbe\u8ba1\u4e2d\u7684\u5143\u7d20\uff0c\u4f7f\u6587\u672c\u3001\u56fe\u50cf\u3001\u989c\u8272\u3001\u52a8\u753b\u3001\u72b6\u6001\u673a\u4ee5\u53ca\u5176\u4ed6\u5c5e\u6027\u80fd\u591f\u81ea\u52a8\u54cd\u5e94\u6570\u636e\u53d8\u5316\u3002"}),"\n",(0,t.jsx)(n.h3,{id:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b",children:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b"}),"\n",(0,t.jsx)(n.p,{children:"\u89c6\u56fe\u6a21\u578b\u5b9a\u4e49\u6570\u636e\u7684\u7ed3\u6784\u3002\u5728\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u6216\u8bbe\u7f6e\u6570\u636e\u7ed1\u5b9a\u4e4b\u524d\uff0c\u4f60\u9700\u8981\u5148\u521b\u5efa\u4e00\u4e2a\u89c6\u56fe\u6a21\u578b\u5e76\u5411\u5176\u4e2d\u6dfb\u52a0\u5c5e\u6027\u3002"}),"\n",(0,t.jsx)(s,{children:(0,t.jsx)(n.p,{children:'\u65b0\u7684 Rive \u6587\u4ef6\u4f1a\u9644\u5e26\u4e00\u4e2a\u540d\u4e3a "ViewModel1" \u7684\u9ed8\u8ba4\u89c6\u56fe\u6a21\u578b\uff0c\u5e76\u4e14\u5b83\u5df2\u9644\u52a0\u5230\u4e3b\u753b\u677f\u3002'})}),"\n",(0,t.jsxs)(l,{children:[(0,t.jsx)(r,{title:"\u6dfb\u52a0\u89c6\u56fe\u6a21\u578b",children:(0,t.jsxs)(n.p,{children:["\u5728 Data \u9762\u677f\u4e2d\uff0c\u70b9\u51fb ",(0,t.jsx)(n.code,{children:"+"})," \u56fe\u6807\u5e76\u9009\u62e9 ",(0,t.jsx)(n.strong,{children:"View Model"})," \u6216 ",(0,t.jsx)(n.a,{href:"#%E5%85%A8%E5%B1%80%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%AE%9E%E4%BE%8B",children:(0,t.jsx)(n.strong,{children:"Global View Model"})}),"\u3002"]})}),(0,t.jsx)(r,{title:"\u6dfb\u52a0\u5c5e\u6027",children:(0,t.jsxs)(n.p,{children:["\u5728 Data \u9762\u677f\u4e2d\uff0c\u70b9\u51fb\u89c6\u56fe\u6a21\u578b\u540d\u79f0\u65c1\u8fb9\u7684 ",(0,t.jsx)(n.strong,{children:"Add View Model Property"})," \u6309\u94ae\uff0c\u7136\u540e\u9009\u62e9\u4f60\u7684",(0,t.jsx)(n.a,{href:"/docs/Editor/Data%20Binding/Property%20Types",children:"\u5c5e\u6027\u7c7b\u578b"}),"\u3002"]})})]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b",src:i(57039).A+"",width:"640",height:"335"})}),"\n",(0,t.jsx)(n.h2,{id:"\u521b\u5efa\u548c\u7f16\u8f91\u5b9e\u4f8b",children:"\u521b\u5efa\u548c\u7f16\u8f91\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u540e\uff0c\u4f60\u53ef\u4ee5\u521b\u5efa\u4e00\u4e2a\u6216\u591a\u4e2a\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\uff0c\u7528\u4e8e\u5b58\u50a8\u8fd9\u4e9b\u5c5e\u6027\u7684\u5b9e\u9645\u503c\u3002"}),"\n",(0,t.jsx)(n.h3,{id:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",children:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u4e00\u4e2a\u89c6\u56fe\u6a21\u578b\u53ef\u4ee5\u62e5\u6709\u591a\u4e2a\u5b9e\u4f8b\u3002\u6bcf\u4e2a\u5b9e\u4f8b\u90fd\u5305\u542b\u81ea\u5df1\u7684\u4e00\u7ec4\u5c5e\u6027\u503c\uff0c\u540c\u65f6\u5171\u4eab\u7531\u89c6\u56fe\u6a21\u578b\u5b9a\u4e49\u7684\u76f8\u540c\u7ed3\u6784\u3002"}),"\n",(0,t.jsx)(s,{children:(0,t.jsx)(n.p,{children:'\u521b\u5efa\u65b0\u7684\u89c6\u56fe\u6a21\u578b\u65f6\uff0cRive \u4f1a\u81ea\u52a8\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a "Instance" \u7684\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\uff0c\u8fd9\u6837\u4f60\u5c31\u53ef\u4ee5\u7acb\u5373\u5f00\u59cb\u6

1d4b\u8bd5\u7ed1\u5b9a\u5e76\u9884\u89c8\u6570\u636e\u3002'})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u521b\u5efa\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",src:i(9173).A+"",width:"640",height:"225"})}),"\n",(0,t.jsxs)(l,{children:[(0,t.jsxs)(r,{title:"\u67e5\u770b\u73b0\u6709\u5b9e\u4f8b",children:[(0,t.jsx)(n.p,{children:"\u5728 Data \u9762\u677f\u4e2d\u9009\u62e9\u4e00\u4e2a\u89c6\u56fe\u6a21\u578b\uff0c\u7136\u540e\u5728 Inspector \u4e2d\u70b9\u51fb\u5b9e\u4f8b\u540d\u79f0\u65c1\u8fb9\u7684 Controls \u56fe\u6807\u3002"}),(0,t.jsxs)(c,{children:[(0,t.jsx)(n.p,{children:"\u82e5\u8981\u4e00\u6b21\u6027\u67e5\u770b\u6240\u6709\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u53ca\u5176\u503c\uff0c\u8bf7\u70b9\u51fb Open Table Data \u6309\u94ae\u3002"}),(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u6253\u5f00\u8868\u683c\u6570\u636e",src:i(70158).A+"",width:"2390",height:"492"})})]})]}),(0,t.jsx)(r,{title:"\u6dfb\u52a0\u5b9e\u4f8b",children:(0,t.jsxs)(n.p,{children:["\u70b9\u51fb ",(0,t.jsx)(n.code,{children:"+"})," \u56fe\u6807\u4ee5\u6dfb\u52a0\u4e00\u4e2a\u65b0\u5b9e\u4f8b\u3002"]})}),(0,t.jsx)(r,{title:"\u547d\u540d\u5b9e\u4f8b",children:(0,t.jsx)(n.p,{children:"\u53cc\u51fb\u5b9e\u4f8b\u540d\u79f0\u4ee5\u91cd\u547d\u540d\u5b83\u3002"})}),(0,t.jsxs)(r,{title:"\u66f4\u65b0\u5b9e\u4f8b\u6570\u636e",children:[(0,t.jsx)(n.p,{children:"\u9009\u4e2d\u5b9e\u4f8b\u540e\uff0c\u66f4\u6539\u5b83\u7684\u4efb\u610f\u5c5e\u6027\u3002"}),(0,t.jsx)(n.p,{children:"\u8bf7\u6ce8\u610f\uff0c\u8fd9\u53ea\u4f1a\u66f4\u6539\u6240\u9009\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4e0a\u7684\u503c\u3002"})]})]}),"\n",(0,t.jsx)(n.h3,{id:"\u79fb\u9664\u5b9e\u4f8b",children:"\u79fb\u9664\u5b9e\u4f8b"}),"\n",(0,t.jsxs)(n.p,{children:["\u70b9\u51fb\u5b9e\u4f8b\u540d\u79f0\u65c1\u8fb9\u7684 ",(0,t.jsx)(n.code,{children:"-"})," \u56fe\u6807\u5373\u53ef\u5220\u9664\u8be5\u5b9e\u4f8b\u3002"]}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u79fb\u9664\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",src:i(4229).A+"",width:"640",height:"233"})}),"\n",(0,t.jsx)(s,{children:(0,t.jsx)(n.p,{children:"\u5220\u9664\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4e0d\u4f1a\u79fb\u9664\u89c6\u56fe\u6a21\u578b\u6216\u5b83\u7684\u5c5e\u6027\u3002\u5b83\u53ea\u4f1a\u79fb\u9664\u8be5\u5b9e\u4f8b\u53ca\u5176\u5b58\u50a8\u7684\u503c\u3002"})}),"\n",(0,t.jsx)(n.h3,{id:"\u5bfc\u51fa\u5b9e\u4f8b",children:"\u5bfc\u51fa\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5bfc\u51fa\u7684\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4f1a\u5305\u542b\u5728 .riv \u6587\u4ef6\u4e2d\u3002\u5982\u679c\u8fd9\u4e9b\u6570\u636e\u53ea\u5728\u5f00\u53d1\u671f\u95f4\u9700\u8981\uff0c\u800c\u4e0d\u662f\u5728\u5e94\u7528\u8fd0\u884c\u65f6\u9700\u8981\uff0c\u8bf7\u7981\u7528 Export Instance\u3002"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u5bfc\u51fa\u5b9e\u4f8b",src:i(66156).A+"",width:"1948",height:"468"})}),"\n",(0,t.jsxs)(n.admonition,{title:"\u7528\u4f8b\uff1aHigh Score",type:"info",children:[(0,t.jsx)(n.p,{children:"\u5047\u8bbe\u4f60\u6b63\u5728 Rive \u4e2d\u6784\u5efa\u4e00\u4e2a\u9ad8\u5206\u699c\u754c\u9762\u3002\u8bbe\u8ba1\u65f6\uff0c\u4f60\u4f1a\u4f7f\u7528\u5047\u7684\u5206\u6570\u6570\u636e\uff1b\u4f46\u5f53\u6e38\u620f\u4e0a\u7ebf\u540e\uff0c\u9ad8\u5206\u699c\u4f1a\u4f7f\u7528\u6765\u81ea\u6570\u636e\u5e93\u6216\u5176\u4ed6\u6765\u6e90\u7684\u771f\u5b9e\u6570\u636e\u586b\u5145\u3002"}),(0,t.jsx)(n.p,{children:"\u5728\u8fd9\u79cd\u60c5\u51b5\u4e0b\uff0c\u5d4c\u5165\u793a\u4f8b\u6570\u636e\u53ea\u4f1a\u589e\u52a0 .riv \u6587\u4ef6\u5927\u5c0f\u3002"})]}),"\n",(0,t.jsx)(n.h2,{id:"\u5c06\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u8fde\u63a5\u5230\u753b\u677f",children:"\u5c06\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u8fde\u63a5\u5230\u753b\u677f"}),"\n",(0,t.jsx)(n.p,{children:"\u5728\u7ed1\u5b9a\u6570\u636e\u4e4b\u524d\uff0c\u4f60\u9700\u8981\u51b3\u5b9a\u6570\u636e\u5e94\u8be5\u5b58\u653e\u5728\u54ea\u91cc\u3002"}),"\n",(0,t.jsx)(n.p,{children:"Rive \u652f\u6301\u4ee5\u4e0b\u5e38\u89c1\u6a21\u5f0f\uff1a"}),"\n",(0,t.jsxs)(n.table,{children:[(0,t.jsx)(n.thead,{children:(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"\u6a21\u5f0f"}),(0,t.jsx)(n.th,{style:{textAlign:"left"},children:"\u8bf4\u660e"})]})}),(0,t.jsxs)(n.tbody,{children:[(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#%E5%85%A8%E5%B1%80%E8%A7%86%E5%9B%BE%E6%A8%A1%E5%9E%8B%E5%AE%9E%E4%BE%8B",children:"\u5168\u5c40\u5b9e\u4f8b"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"}

1,children:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u53ca\u5176\u5c5e\u6027\u53ef\u88ab\u6240\u6709\u753b\u677f\u76f4\u63a5\u8bbf\u95ee"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#%E9%99%84%E5%8A%A0%E5%88%B0%E7%94%BB%E6%9D%BF%E7%9A%84%E5%AE%9E%E4%BE%8B",children:"\u9644\u52a0\u5230\u753b\u677f\u7684\u5b9e\u4f8b"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u9644\u52a0\u5230\u753b\u677f\u4e0a\uff0c\u5176\u503c\u53ef\u88ab\u8be5\u753b\u677f\u53ca\u5176\u5b50\u7ea7\u4f7f\u7528"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#%E4%BD%9C%E4%B8%BA%E5%B5%8C%E5%A5%97%E5%B1%9E%E6%80%A7%E7%9A%84%E5%AE%9E%E4%BE%8B",children:"\u4f5c\u4e3a\u5d4c\u5957\u5c5e\u6027\u7684\u5b9e\u4f8b"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"\u7236\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u5b58\u50a8\u5bf9\u5d4c\u5957\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u7684\u5f15\u7528"})]}),(0,t.jsxs)(n.tr,{children:[(0,t.jsx)(n.td,{style:{textAlign:"left"},children:(0,t.jsx)(n.a,{href:"#%E6%9C%89%E7%8A%B6%E6%80%81%E7%BB%84%E4%BB%B6",children:"\u6709\u72b6\u6001\u5d4c\u5957\u7ec4\u4ef6"})}),(0,t.jsx)(n.td,{style:{textAlign:"left"},children:"\u81ea\u5305\u542b\u3001\u53ef\u590d\u7528\u7684\u7ec4\u4ef6\uff0c\u7528\u4e8e\u5b58\u50a8\u81ea\u5df1\u7684\u552f\u4e00\u6570\u636e"})]})]})]}),"\n",(0,t.jsx)(n.h3,{id:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b",children:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u63d0\u4f9b\u7684\u6570\u636e\u53ef\u4ee5\u5728\u6574\u4e2a Rive \u6587\u4ef6\u4e2d\u8bbf\u95ee\u3002"}),"\n",(0,t.jsx)(n.p,{children:"\u5728\u5e95\u5c42\u5b9e\u73b0\u4e0a\uff0c\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u4e0d\u8fde\u63a5\u5230\u7279\u5b9a\u753b\u677f\u3002\u76f8\u53cd\uff0c\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u53ca\u5176\u5c5e\u6027\u53ef\u88ab\u6240\u6709\u753b\u677f\u76f4\u63a5\u8bbf\u95ee\u3002"}),"\n",(0,t.jsx)(a,{id:"SPrxwHfPyP4"}),"\n",(0,t.jsxs)(n.p,{children:["\u7ed1\u5b9a\u5230\u5168\u5c40\u89c6\u56fe\u6a21\u578b\u5c5e\u6027\u7684\u7ed1\u5b9a\u59cb\u7ec8\u662f",(0,t.jsx)(n.strong,{children:"\u76f8\u5bf9\u7ed1\u5b9a"}),"\u3002\u8fd9\u610f\u5473\u7740\u7ed1\u5b9a\u4f1a\u4ece\u6700\u8fd1\u7684 View Model \u5f00\u59cb\u641c\u7d22\u540c\u540d\u5c5e\u6027\uff0c\u800c\u4e0d\u662f\u76f4\u63a5\u6307\u5411\u5168\u5c40\u5c5e\u6027\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:["\u5982\u679c\u66f4\u8fd1\u7684 View Model \u4e2d\u5b58\u5728\u540c\u540d\u5c5e\u6027\uff0c\u5219\u4f1a\u4f7f\u7528\u8be5\u5c5e\u6027\u3002\u4f8b\u5982\uff0c\u7ed1\u5b9a\u5230\u5168\u5c40 ",(0,t.jsx)(n.code,{children:"scale"})," \u5c5e\u6027\u65f6\uff0c\u5982\u679c\u66f4\u8fd1\u7684 View Model \u4e2d\u4e5f\u6709\u4e00\u4e2a ",(0,t.jsx)(n.code,{children:"scale"})," \u5c5e\u6027\uff0c\u7ed1\u5b9a\u4f1a\u89e3\u6790\u5230\u8be5\u5c5e\u6027\u3002"]}),"\n",(0,t.jsxs)(n.p,{children:["\u4e86\u89e3\u66f4\u591a\uff1a",(0,t.jsx)(n.a,{href:"../Data%20Binding/Binding%20Data#%E7%BB%9D%E5%AF%B9%E7%BB%91%E5%AE%9A%E4%B8%8E%E7%9B%B8%E5%AF%B9%E7%BB%91%E5%AE%9A",children:"\u7edd\u5bf9\u7ed1\u5b9a\u4e0e\u76f8\u5bf9\u7ed1\u5b9a"}),"\u3002"]}),"\n",(0,t.jsx)(n.h3,{id:"\u9644\u52a0\u5230\u753b\u677f\u7684\u5b9e\u4f8b",children:"\u9644\u52a0\u5230\u753b\u677f\u7684\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u53ef\u4ee5\u9644\u52a0\u5230\u7279\u5b9a\u753b\u677f\u6216\u5d4c\u5957\u7ec4\u4ef6\u3002\u5f53\u53ea\u6709\u8be5\u753b\u677f\u53ca\u5176\u5b50\u7ea7\u9700\u8981\u8bbf\u95ee\u8be5\u6570\u636e\u65f6\uff0c\u8fd9\u79cd\u65b9\u5f0f\u5f88\u6709\u7528\u3002"}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-text",children:"EnemyVM\n\u251c\u2500 health\n"})}),"\n",(0,t.jsx)(n.admonition,{title:"\u7528\u4f8b\uff1aGame",type:"info",children:(0,t.jsxs)(n.p,{children:["\u4e00\u4e2a Enemy \u89c6\u56fe\u6a21\u578b\u53ef\u80fd\u5305\u542b\u4e00\u4e2a ",(0,t.jsx)(n.code,{children:"health"})," \u5c5e\u6027\u3002\u8fd9\u4e2a\u5c5e\u6027\u53ef\u80fd\u53ea\u88ab\u654c\u4eba\u81ea\u8eab\u4f7f\u7528\uff0c\u800c\u4e0d\u88ab\u5176\u7236\u7ea7\u4f7f\u7528\u3002"]})}),"\n",(0,t.jsx)(n.h3,{id:"\u4f5c\u4e3a\u5d4c\u5957\u5c5e\u6027\u7684\u5b9e\u4f8b",children:"\u4f5c\u4e3a\u5d4c\u5957\u5c5e\u6027\u7684\u5b9e\u4f8b"}),"\n",(0,t.jsx)(n.p,{children:"\u89c6\u56fe\u6a21\u578b\u53ef\u4ee5\u62e5\u6709\u4f5c\u4e3a\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u7684\u5c5e\u6027\u3002"}),"\n",(0,t.jsxs)(n.p,{children:["\u5728\u8fd9\u79cd\u6a21\u5f0f\u4e2d\uff0c\u7236\u89c6\u56fe\u6a21\u578b\u4f1a\u5b58\u50a8\u5bf9\u5b50\u5b9e\u4f8b\u7684\u5f15\u7528\uff0c\u53ef\u4ee5\u662f\u76f4\u63a5\u5f15\u7528\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7",(0,t.jsx)(n.a,{href:"/docs/Editor/Data%20Binding/Lists",children:"\u5217\u8868"}),"\u5f15\u7528\u3002"]}),"\n",(0,t.jsx)(n.pre,{children:(0,t.jsx)(n.code,{className:"language-text",children:"GameVM\n\u251c\u2500 health\n\u251c\u2500 score\n\u251c\u2500 avatar\n\u2514\u2500 inventory (stores an instance of InventoryVM)\n\nInventoryVM\n\u251c\u2500 Sword\n\u251c\u2500 Shield\n\u2514\u2500 Potion\n"})}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u5c06\u5b9e\u4f8b\u9644\u52a0\u5230\u7ec4\u4ef6",src:i(65574).A+"",width:"2110",height:"682"})}),"\n",(0,t.jsx)(n.p,{children:"\u5f53\u7236\u753b\u677f\u9700\u8981\u7ba1\u7406\u4e00\u7ec4\u9879\u76ee\uff0c\u540c\u65f6\u4ecd\u5141\u8bb8\u6bcf\u4e2a\u7ec4\u4ef6\u7ef4\u62a4\u81ea\u5df1\u7684\u6570\u636e\u65f6\uff0c\u8fd9\u79cd\u65b9\u5f0f\u5f88\u6709\u7528\u3002"}),"\n",(0,t.jsx)(n.admonition,{title:"\u7528\u4f8b\uff1aInventory Grid",type:"info",children:(0,t.jsx)(n.p,{children:"\u4e00\u4e2a\u7269\u54c1\u680f\u754c\u9762\u53ef\u80fd\u5305\u542b\u4e00\u4e2a Item \u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u5217\u8868\uff0c\u5176\u4e2d\u6bcf\u4e2a\u7269\u54c1\u680f\u69fd\u4f4d\u7ec4\u4ef6\u90fd\u7ed1\u5b9a\u5230\u4e0d\u540c\u7684\u7269\u54c1\u3002"})}),"\n",(0,t.jsx)(n.h3,{id:"\u6709\u72b6\u6001\u7ec4\u4ef6",children:"\u6709\u72b6\u6001\u7ec4\u4ef6"}),"\n",(0,t.jsx)(n.p,{children:"\u6709\u72b6\u6001\u7ec4\u4ef6\u662f\u4e00\u4e2a\u80fd\u591f\u7ef4\u62a4\u81ea\u8eab\u6570\u636e\u7684\u7ec4\u4ef6\u5b9e\u4f8b\u3002"}),"\n",(0,t.jsx)(n.p,{children:"\u4e0e\u4f20\u7edf\u7684\u7ec4\u4ef6\u89c6\u56fe\u6a21\u578b\u5b9e\u4f8b\u4e0d\u540c\uff0c\u8fd9\u4e9b\u5b9e\u4f8b\u4e0d\u9700\u8981\u7531\u7236\u89c6\u56fe\u6a21\u578b\u521b\u5efa\u6216\u5f15\u7528\u3002\u76f8\u53cd\uff0c\u5b83\u4eec\u7684\u5c5e\u6027\u4f1a\u663e\u793a\u5728\u4fa7\u8fb9\u680f\u4e2d\u3002"}),"\n",(0,t.jsx)(n.p,{children:(0,t.jsx)(n.img,{alt:"\u6709\u72b6\u6001\u7ec4\u4ef6",src:i(38851).A+"",width:"2112",height:"720"})}),"\n",(0,t.jsxs)(n.p,{children:["\u66f4\u591a\u4fe1\u606f\uff0c\u8bf7\u53c2\u9605",(0,t.jsx)(n.a,{href:"/docs/Editor/Data%20Binding/Stateful%20Components",children:"\u6709\u72b6\u6001\u7ec4\u4ef6"}),"\u3002"]})]})}function h(e={}){const{wrapper:n}={...(0,d.R)(),...e.components};return n?(0,t.jsx)(n,{...e,children:(0,t.jsx)(o,{...e})}):o(e)}function x(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}},65574:(e,n,i)=>{i.d(n,{A:()=>s});

1const s=i.p+"assets/images/connect-instance-to-nested-component-75c5e9e5bf869abbb4f4ad710488f1b5.png"},57039:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/create-view-model-5b8ec50c0b5e88466c6055772b377659.gif"},66156:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/export-instance-e3f3a56d25ab79f0e95eff1c1c0f7f96.png"},9173:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/manage-instances-acc009b6cd2a891876da7b317c1fb7b3.gif"},70158:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/open-table-data-ab73b0e051ee4a3ed5c2cce1d9c7f640.png"},4229:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/remove-view-model-instance-4a0cbea07b83c4fe57126513d3fc5d07.gif"},38851:(e,n,i)=>{i.d(n,{A:()=>s});const s=i.p+"assets/images/stateful-components-9e01b14a9fe57cd1090b606aff7d4470.png"},28453:(e,n,i)=>{i.d(n,{R:()=>r,x:()=>l});var s=i(96540);const t={},d=s.createContext(t);function r(e){const n=s.useContext(d);return s.useMemo((function(){return"function"==typeof e?e(n):{...n,...e}}),[n,e])}function l(e){let n;return n=e.disableParentContext?"function"==typeof e.components?e.components(t):e.components||t:r(e.components),s.createElement(d.Provider,{value:n},e.children)}}}]);