images/docs/guide/form_data_flow.svg
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xl="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 576 733" width="48pc" height="733pt" xmlns:dc="http://purl.org/dc/elements/1.1/"><metadata> Produced by OmniGraffle 6.5.2 <dc:date>2011-10-06 04:16:40 +0000</dc:date></metadata><defs><font-face font-family="Helvetica" font-size="14" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="532.22656" cap-height="719.72656" ascent="770.01953" descent="-229.98047" font-weight="bold"><font-face-src><font-face-name name="Helvetica-Bold"/></font-face-src></font-face><filter id="Shadow" filterUnits="userSpaceOnUse"><feGaussianBlur in="SourceAlpha" result="blur" stdDeviation="1.308"/><feOffset in="blur" result="offset" dx="0" dy="2"/><feFlood flood-color="black" flood-opacity=".5" result="flood"/><feComposite in="flood" in2="offset" operator="in" result="color"/><feMerge><feMergeNode in="color"/><feMergeNode in="SourceGraphic"/></feMerge></filter><font-face font-family="Courier New" font-size="12" panose-1="2 7 6 9 2 2 5 2 4 4" units-per-em="1000" underline-position="-232.91016" underline-thickness="100.097656" slope="0" x-height="443.35938" cap-height="591.79688" ascent="832.51953" descent="-300.29297" font-weight="bold"><font-face-src><font-face-name name="CourierNewPS-BoldMT"/></font-face-src></font-face><font-face font-family="Helvetica" font-size="12" units-per-em="1000" underline-position="-75.683594" underline-thickness="49.316406" slope="0" x-height="522.94922" cap-height="717.28516" ascent="770.01953" descent="-229.98047" font-weight="500"><font-face-src><font-face-name name="Helvetica"/></font-face-src></font-face><marker orient="auto" overflow="visible" markerUnits="strokeWidth" id="FilledArrow_Marker" viewBox="-1 -4 10 8" markerWidth="10" markerHeight="8" color="black"><g><path d="M 8 0 L 0 -3 L 0 3 Z" fill="currentColor" stroke="currentColor" stroke-width="1"/></g></marker></defs><g stroke="none" stroke-opacity="1" stroke-dasharray="none" fill="none" fill-opacity="1"><title>Canvas 1</title><rect fill="white" width="576" height="733"/><g><title>Layer 1</title><path d="M 108 454 L 445 454 C 452.73199 454 459 460.268 459 468 L 459 527.7054 C 459 535.4374 452.73199 541.7054 445 541.7054 L 108 541.7054 C 100.268014 541.7054 94 535.4374 94 527.7054 L 94 468 C 94 460.268 100.268014 454 108 454 Z" fill="#dbeeff"/><path d="M 108 454 L 445 454 C 452.73199 454 459 460.268 459 468 L 459 527.7054 C 459 535.4374 452.73199 541.7054 445 541.7054 L 108 541.7054 C 100.268014 541.7054 94 535.4374 94 527.7054 L 94 468 C 94 460.268 100.268014 454 108 454 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(99 459)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="bold" x="0" y="14" textLength="120.56543">Controller (scope)</tspan></text><path d="M 108 142 L 445 142 C 452.73199 142 459 148.26801 459 156 L 459 387 C 459 394.73199 452.73199 401 445 401 L 108 401 C 100.268014 401 94 394.73199 94 387 L 94 156 C 94 148.26801 100.268014 142 108 142 Z" fill="#dcedff"/><path d="M 108 142 L 445 142 C 452.73199 142 459 148.26801 459 156 L 459 387 C 459 394.73199 452.73199 401 445 401 L 108 401 C 100.268014 401 94 394.73199 94 387 L 94 156 C 94 148.26801 100.268014 142 108 142 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1" stroke-dasharray="4,4"/><text transform="translate(99 147)" fill="black"><tspan font-family="Helvetica" font-size="14" font-weight="bold" x="0" y="14" textLength="13.213867">W</tspan><tspan font-family="Helvetica" font-size="14" font-weight="bold" x="13.09082" y="14" textLength="87.11719">idget (scope)</tspan></text><g filter="url(#Shadow)"><path d="M 237 477.205 L 306 477.205 C 313.73199 477.205 320 483.473 320 491.205 L 320 498.205 C 320 505.937 313.73199 512.205 306 512.205 L 237 512.205 C 229.26801 512.205 223 505.937 223 498.205 L 223 491.205 C 223 483.473 229.26801 477.205 237 477.205 Z" fill="#9cef99"/><path d="M 237 477.205 L 306 477.205 C 313.73199 477.205 320 483.473 320 491.205 L 320 498.205 C 320 505.937 313.73199 512.205 306 512.205 L 237 512.205 C 229.26801 512.205 223 505.937 223 498.205 L 223 491.205 C 223 483.473 229.26801 477.205 237 477.205 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(228 487.705)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="14.6953125" y="10" textLength="57.609375">property</tspan></text></g><g filter="url(#Shadow)"><path d="M 237 348 L 306 348 C 313.73199 348 320 354.26801 320 362 L 320 369 C 320 376.73199 313.73199 383 306 383 L 237 383 C 229.26801 383 223 376.73199 223 369 L 223 362 C 223 354.26801 229.26801 348 237 348 Z" fill="#9cef99"/><path d="M 237 348 L 306 348 C 313.73199 348 320 354.26801 320 362 L 320 369 C 320 376.73199 313.73199 383 306 383 L 237 383 C 229.26801 383 223 376.73199 223 369 L 223 362 C 223 354.26801 229.26801 348 237 348 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(228 358.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="3.8935547" y="10" textLength="79.21289">$modelValue</tspan></text></g><g filter="url(#Shadow)"><path d="M 237 255 L 306 255 C 313.73199 255 320 261.26801 320 269 L 320 276 C 320 283.73199 313.73199 290 306 290 L 237 290 C 229.26801 290 223 283.73199 223 276 L 223 269 C 223 261.26801 229.26801 255 237 255 Z" fill="#9cef99"/><path d="M 237 255 L 306 255 C 313.73199 255 320 261.26801 320 269 L 320 276 C 320 283.73199 313.73199 290 306 290 L 237 290 C 229.26801 290 223 283.73199 223 276 L 223 269 C 223 261.26801 229.26801 255 237 255 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(228 265.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="7.4941406" y="10" textLength="72.01172">$viewValue</tspan></text></g><g filter="url(#Shadow)"><path d="M 237 154 L 306 154 C 313.73199 154 320 160.26801 320 168 L 320 175 C 320 182.73199 313.73199 189 306 189 L 237 189 C 229.26801 189 223 182.73199 223 175 L 223 168 C 223 160.26801 229.26801 154 237 154 Z" fill="#f6bf4d"/><path d="M 237 154 L 306 154 C 313.73199 154 320 160.26801 320 168 L 320 175 C 320 182.73199 313.73199 189 306 189 L 237 189 C 229.26801 189 223 182.73199 223 175 L 223 168 C 223 160.26801 229.26801 154 237 154 Z" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(228 164.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="29.501953" y="11" textLength="27.996094">DOM</tspan></text></g><path d="M 313.83824 187.18535 C 317.55846 197.45588 325.02838 206.31793 325 218 C 324.97828 226.9418 320.56343 237.5399 316.79965 247.89175" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M 313.8291 288.18857 C 317.55236 299.12462 325.02685 310.65167 325 321 C 324.98145 328.14682 321.38504 334.73439 317.91739 341.34157" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M 313.85509 381.1789 C 318.90289 393.68635 329.03118 402.3215 329 418.705 C 328.9736 432.57978 321.66082 452.0187 316.3181 469.95174" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M 229.19497 479.0089 C 224.13049 461.24272 213.97716 442.08564 214 425.705 C 214.01811 412.71886 220.43185 401.47151 225.6354 389.89637" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M 229.1706 349.81154 C 225.78074 339.87535 218.9731 330.34835 219 320 C 219.01925 312.59446 222.53862 304.76512 225.80075 296.9675" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><path d="M 229.15531 256.81703 C 224.77065 245.21251 215.97055 233.68246 216 222 C 216.02192 213.30432 220.93574 204.52032 225.27936 195.74734" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(164 414.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="10" textLength="50.408203">$watch </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="25" textLength="43.353516">callback</tspan></text><text transform="translate(121 315)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x=".19238281" y="10" textLength="93.615234">$parseModel()</tspan></text><text transform="translate(330 315)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x=".29296875" y="10" textLength="86.41406">$parseView()</tspan></text><text transform="translate(151 215.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x=".09472656" y="10" textLength="64.810547">$render()</tspan></text><text transform="translate(330 194.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="62.015625">DOM Event</tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="24" textLength="43.20703">$emit(</tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="38" textLength="122.41992"> '$viewChange', </tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="52" textLength="57.609375"> value)</tspan></text><text transform="translate(334 405.5)" fill="black"><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="11" textLength="28.68164">copy </tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="28.68164" y="11" textLength="79.21289">$modelValue</tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="107.89453" y="11" textLength="3.3339844"> </tspan><tspan font-family="Helvetica" font-size="12" font-weight="500" x="0" y="26" textLength="49.359375">to model </tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="49.359375" y="26" textLength="57.609375">property</tspan><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="40" textLength="64.810547">$validate</tspan></text><path d="M 223 272.5 C 223 272.5 179 299 179 270 C 179.00003 249.17317 201.69344 259.80778 214.48508 267.45652" marker-end="url(#FilledArrow_Marker)" stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/><text transform="translate(107 265.5)" fill="black"><tspan font-family="Courier New" font-size="12" font-weight="bold" x="0" y="10" textLength="64.810547">$validate</tspan></text></g></g></svg>