نما یک کامپوننت است: گرهای در درخت رابط کاربری با چیدمان، رفتار و استایلهای خاص خود. این فصل به این میپردازد که نماها چگونه تعریف، به منطق متصل، ترکیب و بازاستفاده میشوند.اگر view.tree برایتان تازه است: از تایپاسکریپت به view.tree یک مؤلفه را دو بار میسازد — یک بار بهصورت کلاسِ دستنویس و یک بار بهصورت درخت — و کدی را نشان میدهد که درخت به آن کامپایل میشود. اگر نحوِ زیر بهجای یک کوتهنوشت، زبانی تازه به نظر میرسد، اول آن صفحه را بخوانید.
کامپوننت $my_card در my/card/ قرار دارد و با حداکثر سه فایل توصیف میشود که هرکدام وظیفهای روشن دارند:card.view.tree — کامپوننت چیست: ساختار و اتصالهای پیشفرض آن.card.view.ts — چگونه رفتار میکند: متدهای TypeScript، وضعیت واکنشگرا.card.view.css.ts — چه ظاهری دارد: استایلهای نوعدار که توسط کامپایلر بررسی میشوند.جدا نگهداشتن ساختار، رفتار و استایل عمدی است — هر فایل کوچک و خوانا میماند و چیدمان هرگز با منطق درهمتنیده نمیشود.هیچکدام از این سه بهتنهایی اجباری نیست. card.view.tree را حذف کنید و کلاس را مستقیم در namespace $ بنویسید: ساختار به متدهای معمولی تبدیل میشود و مؤلفه همچنان کار میکند. بقیهٔ این فصل از درخت استفاده میکند، چون ساختار وقتی لولهکشیاش برایتان تولید شود همین شکلی است.
view.tree ساختار را بهصورت اعلانی توصیف میکند. تورفتگی بهمعنای تودرتویی است؛ هیچ برچسب بستهشدنی وجود ندارد.1$my_card$mol_view2 sub /3<= Title $mol_view4 sub /<= title \5<= Body $mol_view6 sub /<= text \هر نام با حرف بزرگ (Title، Body) به یک ویژگیِ واقعی تبدیل میشود که میتوانید به آن دسترسی داشته باشید، آن را بازنویسی یا استایلدهی کنید. هر اتصال با حرف کوچک (title، text) به مقداری تبدیل میشود که میتوانید در .view.ts محاسبه کنید.
دو عملگر یک ویژگی را به منبعش متصل میکنند:<=یکطرفه: فرزند مقداری را از مالک میخواند.<=>دوطرفه: مقدار در هر دو جهت جریان مییابد — برای ورودیها استفاده میشود.1$my_form$mol_view2 sub /3<= Field $mol_string4 value?<=> text?\اینجا value ورودی و text مالک بهطور خودکار همگام میمانند: در فیلد تایپ کنید تا text بهروز شود؛ text را در کد تنظیم کنید تا فیلد آن را بازتاب دهد.
