آموزش Knockout

Knockout یک کتابخانه ی JavaScript است که به شما امکان می دهد صفحات وبی بنویسید که از لحاظ ظاهر و ویرایش اطلاعات واکنشگرا (responsive) و غنی هستند و دارای data model زیرساختی کارامد می باشند. هر زمان که در UIاپلیکیشن های تحت وب خود بخش هایی دارید که به صورت داینامیک بروز آوری می شوند (برای مثال بر اساس عملیات کاربر یا به هنگام تغییر در منبع داده ی خارجی)، می توانید به کمک کتابخانه ی KO آن را به روش آسان تر و با قابلیت نگهداشت بهتر (maintainable) پیاده سازی کنید. در نهایت می توان گفت که knockout.js یک کتابخانه برای زبان اسکریپت نویسی سمت کلاینت JavaScript است که الگوی توسعه ی MVVM و تکنیک data binding را در برنامه های تحت وب پیاده سازی می کند.

می توانید با کلیک بر روی لینک زیر آخرین production build (نسخه ی نهایی و عیب زدایی شده) از knockout.js را دریافت کنید:

Model-View-View Model یا به اختصار MVVM یک الگوی توسعه برای ساخت رابط کاربری (UI) می باشد. این الگو شرح می دهد چگونه می توانید یک UI پیچیده را با تقسیم آن به سه بخش، قابل مدیریت و ساده نگه دارید

اگر می خواهید از تغییرات در یک شی بلافاصله مطلع شده و به آن ها واکنش نشان دهید، بایستی از observable ها استفاده کنید. اگر می خواهید تغییراتی که در collection یا مجموعه ای از اشیا رخ می دهد را رصد کرده و به آن ها واکنش نشان دهید، آنگاه می بایست از observableArray (آرایه ای از observable ها) استفاده کنید. بنابراین اگر می خواهید چند مقدار را نمایش داده یا ویرایش کنید و به تبع آن لازم دارید بخش های تکراری UI، همینکه آیتم ها اضافه/حذف می شوند، پدیدار و ناپدید شوند، می توانید از observable array های استفاده کنید.

اگر یک observable برای خاصیت firstName و یکی برای lastName داشته باشید و بخواهید fullName (جمع مقدار دو property) را نمایش دهید، چه کار باید انجام دهید؟ برای این منظور کافی است از computed observable ها استفاده نمایید –computed observable ها یکسری توابع وابسته به یک یا چند observable دیگر هستند و هر زمان که یکی از این وابستگی ها (observable ها) تغییر کند، متناسب با آن تغییر به صورت خودکار بروز رسانی می شوند. برای مثال، با در نظر گرفتن کلاس view model زیر.

این مبحث متناسب با نیاز کاربران خبره ی کتابخانه ی KO نوشته شده است و موارد کاربرد آن محدود به شرایط خاص و سناریوهای پیچیده می باشد –بنابراین کاربران تازه وارد می توانند نخوانده از آن رد شوند.

این binding المان DOM مربوطه (bind یا متصل شده به data model) را با توجه به مقداری که به آن (binding) ارسال می شود، به نمایش گذاشته یا از نظر پنهان می کند.

"css" یک یا چند کلاس (نام گذاری شده ی) CSS را به المان DOM مربوطه (متصل شده به data model) اضافه کرده یا از آن حذف می کند. اگر بخواهید مقداری را در صورت منفی شدن آن با رنگ قرمز هایلایت کنید، این binding می تواند به کمک شما بیاید.

این binding مقدار یک یا چند style را به المان DOM مربوطه (که به صورت دو طرفه به data model متصل شده) اضافه کرده یا از آن حذف می کند. از "style" می توانید برای هایلایت کردن مقداری با رنگ قرمز، در صورت منفی شدن آن مقدار استفاده کنید و یا پهنای یک خط را طوری تنظیم کنید که در صورت تغییر در مقدار عددی متناسب با آن تغییر اندازه دهد. (اگر نمی خواهید یک مقدار style را به صورت صریح اعمال کنید و ترجیح می دهید یک کلاس CSS تخصیص دهید، بهتر است به مبحث پیشین (css binding) مراجعه نمایید).

این binding یک روش کلی و سراسری (generic) برای مقداردهی attribute المان های DOM مربوطه (متصل شده به data model) فراهم می آورد. به طور مثال اگر بخواهید مقدار خصوصیت (attribute) title یک المان، خصوصیت src از تگ img یا href یک لینک را بر اساس مقادیر موجود در view model تنظیم کنید، به طوری که مقدار attribute با تغییر در مقدار model property مربوطه (برای تطبیق) به صورت خودکار بروز رسانی شود، آنگاه خواهید دید که binding مزبور می تواند چه کمک شایانی به شما بکند.

Binding آشکار باعث می شود که المان DOM مربوطه بر اساس مقدار عبوری به Binding مخفی یا آشکار شود. آموزش KnockoutJS –آموزش Binding آشکار در KnockoutJS

آموزش KnockoutJS-آموزش Binding متن در KnockoutJSاین binding باعث می شود که المان DOM مربوطه مقدار متن پارامتر شما را نمایش دهد.این کار معمولا با المان هایی مانند < span > یا < em > که از قدیم وظیفه ی نمایش متن را بر عهده داشته اند، مفیدتر است. اما از نظر فنی می توانید از این binding در کنار هر المانی استفاده کنید.

این binding باعث می شود که المان مربوطه ی DOM ، HTML ای را نمایش دهد که توسط پارامتر شما مشخص شده است.استفاده از این binding معمولا زمانی مفیدتر است که مقادیر موجود در view model تان رشته هایی از HTML markup باشند که قصد دارید آن ها نمایش دهید.آموزش KnockoutJS-آموزش HTML binding در KnockoutJS

این binding کلاس های CSS را در المان DOM مربوطه حذف یا اضافه می کند. برای مثال فرض کنید که عدد منفی ای داشته باشید و بخواهید آن را به رنگ قرمز هایلایت کنید، در اینصورت این binding برای تان مفید است.آموزش KnockoutJS-آموزش CSS binding در KnockoutJS

کار این binding حذف یا اضافه کردن مقادیر استایل (style values) به المان مربوطه ی DOM است. فرض کنید که یک مقدار عددی دارید که می خواهید بعد از اینکه کمتر از صفر شد آن را قرمز کنید، یا اینکه بخواهید عرض کادری را تغییر دهید که قرار است عرض آن همراه با تغییر مقدار عددی داخل آن، تغییر کند. در این صورت این binding برای شما مفید است.آموزش KnockoutJS-آموزش style bindingدر KnockoutJS

این binding روشی کلی برای تنظیم مقدار تمام ویژگی(attribute ) المان مربوطه ی DOM را ارائه می کند. title یک المان ، src مربوط به تگ img ، یا href لینکی را بر اساس مقادیر موجود در view model تان تنظیم کنید، به گونه ای که مقدار این ویژگی هر زمان که مشخصه ی مدل متناظر تغییر کند، به صورت خودکار آپدیت شود، در این صورت این binding برایتان مفید است.آموزش KnockoutJS-آموزش attr bindin در KnockoutJS

این binding به ازای هر یک از ورودی های موجود در یک آرایه، بخشی از markup را کپی می کند و هر یک از بخش های کپی شده ی این markup را به آیتم آرایه ای متناظر مقید می کند. این binding در نمایش دادن لیست ها یا جدول ها کاربرد ویژه ای دارد. آموزش KnockoutJS-آموزش foreach binding در KnockoutJS

این Binding باعث می شود که تنها در صورتی که مقدار عبارتی مشخص برابر با true شود (یا مقدار شبه true ای مانند شیء تهی یا رشته های غیر خالی) بخشی از markup ، در سند شما ظاهر شود ( و ویژگی های data-bind آن اعمال شود).

این binding درست مانند if binding عمل می کند، با این تفاوت نتیجه هر عبارتی که به آن تحویل دهید را برعکس می کند. برای اطلاعات بیشتر به if binding مراجعه کنید. آموزش KnockoutJS-آموزش Ifnot binding در KnockoutJS

کار این binding ایجاد کردن یک binding text جدید است، به گونه ای که المان های زیرمجموعه در درون متن یک شیء مشخص مقید باشند. می توانید در کنار دیگر binding های کنترل جریان مانند if و foreach ، از binding های with به صورت لانه ای استفاده کنید.آموزش Knockout-آموزش With binding در Knockout

component مشخصی را داخل یک المان ئارد می کند و به صورت اختیاری پارامترهایی را به آن تحویل می دهد.آموزش KnockoutJS-آموزش component binding در KnockoutJS

کار این binding اضافه کردن یک event handler است به گونه ای که بعد از اینکه المان DOM مربوطه کلیک می شود، تابع جاوا اسکریپت احضار می شود. کاربرد این binding بیشتر در المان هایی مانند button, input و a ظهور پیدا می کند. اما در واقع در کنار همه ی المان های قابل دیدن DOM کار می کند.آموزش KnockoutJS-آموزش click binding در KnockoutJS

این binding این امکان را برای شما فراهم می کند تا برای یکی از رویدادهای مشخص، event handler ای را اضافه کنید. به صورتی که زمانی که این رویداد در المان مربوطه ی DOM فعال شود، تابع جاوا اسکریپت انتخاب شده ی شما احضار خواهد شد. از event bindingمی توان برای مقید شدن به تمامی event ها مانند keypress, mouseover یا mouseout استفاده کرد.آموزش KnockoutJS-آموزش event binding در KnockoutJS

کار این binding اضافه کردن یک event handler است به گونه ای که پس از submit شدن المان مربوطه ی DOM تابع انتخاب شده ی جاوا اسکریپت تان احضار خواهد شد. معمولا از این binding در المان های form استفاده می شود.آموزش KnockoutJS-آموزش submit binding در KnockoutJS

enable binding باعث می شود که المان مربوطه ی DOM تنها وقتی که مقدار پارامتر برابر با true باشد، enable شود. این binding در form element هایی مانند input, select و textarea مفید خواهد بود.آموزش KnockoutJS-آموزش enable binding در KnockoutJS

disable binding باعث می شود که المان مربوطه ی DOM تنها وقتی که مقدار پارامتر برابر با true باشد، disable شود. این binding در form element هایی مانند input, select و textarea مفید است. آموزش KnockoutJS-آموزش disable binding در KnockoutJS

value binding مقدار المان مربوطه ی DOM را در view model تان به یک مشخصه مرتبط می کند. این binding معمولا در form element هایی مانند < input >, < select > و < textarea > مفید است.آموزش KnockoutJS-آموزش value binding در KnockoutJS

این binding یک text box input یا یک text area textarea را به یک مشخصه ی view model متصل می کند. و در این صورت بین مشخصه ی view model و مقدار المان امکان آپدیت های دو طرفه را فراهم می کند. برخلاف value binding ، textInput برای انواع ورودی های کاربر امکان آپدیت های فوری را از DOM فراهم می کند. آموزش KnockoutJS-آموزش textInput bindingدر KnockoutJS

hasFocus binding حالت تمرکز المانی از DOM را به مشخصه ی view model متصل می کند. این binding یک binding دو طرفه محسوب می شود.آموزش KnockoutJS-آموزش hasFocus binding در KnockoutJS

checked binding یک checkable form control (همان checkbox ) (<input type='checkbox'>) یا یک radio button (<input type='radio'>) را به یک مشخصه ی موجود در view model شما متصل می کند.آموزش KnockoutJS-آموزش checked binding در KnockoutJS

options binding کنترل می کند که چه option هایی باید در یک drop-down لیست (یعنی یک المان <select> ) یا لیست چند انتخابی (multi-select list) (مثلا <select size='6'>) نمایش داده شود. این binding را تنها می توان کنار المان های <select> استفاده کرد.آموزش KnockoutJS-آموزش options binding در KnockoutJS

selectedOptions binding کنترل می کند که کدام المان ها در یک لیست چند انتخابی در حال حاضر انتخاب شده اند. این binding قرار است که در کنار المان <select> و options binding استفاده شود.آموزش KnockoutJS-آموزش selectedOptions binding در KnockoutJS

template binding المان های مربوط به DOM را با نتایج حاصل از رندر کردن یک قالب را پر (populate) می کند. قالب ها روشی ساده برای ساخت ساختارهای پیچیده ی رابط کاربری هستند (این کار را می توان با حلقه های تو در تو یا حلقه های تکرار انجام داد). قالب ها به عنوان تابعی از view model data شما عمل می کنند.آموزش KnockoutJS-آموزش template bindingدر KnockoutJS

عموما مقید شدن به مشخصات داده های ساده یا استفاده از تنها یک binding کار ساده و واضحی است. برای اینکه بتوان binding های پیچیده تری را انجام داد و رفتار همچنین سیستم سینتکس data-binding در KnockOut را بهتر درک کرد، می توان از سیستم مقید سازی اعلانی (declarative binding system) ناک اوت کمک گرفت.

Binding context شیئی است که داده هایی را نگهداری می کند که می توان از binding ها به آن ها اشاره کرد. طی زمان به کار گرفتن binding ها ناک اوت به صورت خودکار سلسله مراتبی از زمینه های binding را ایجاد و مدیریت می کند. سطح ریشه ی این سلسله مراتب به پارامتر viewModel ای اشاره دارد که شما در اختیار ko.applyBindings(viewModel) قرار داده اید.

کار شما محدود به binding های پیش فرض مانند click ، value و غیره نمی شود. بلکه می توانید binding های مخصوص به خودتان را ایجاد کنید. با کمک این کار می توانید چگونگی تعامل observable ها با المان های DOM را کنترل کنید و انعطاف پذیری برنامه را در encapsulate کردن رفتارهای پیچیده افزایش دهید.ایجاد binding های اختصاصی در Knockout

یک تکنیک پیشرفته بوده و معمولا تنها در مواقعی استفاده می شود که بخواهیم کتابخانه های binding های با قابلیت استفاده ی مجدد را ایجاد کنیم. در حالت طبیعی در ساختن نرم افزارها به کمک Knockout نیازی به این تکنیک نیست.

کامپوننت ها روشی قدرتمند و آسان برای سازماندهی کدهای رابط کاربری تان در چانک هایی با قابلیت استفاده مجدد و کامل هستند.

برای آنکه KnockOut بتواند کامپوننت های شما را نمونه سازی و بارگیری کند، شما باید با استفاده از ko.components.register و پیکربندی ای که در اینجا ارائه شده است، آن ها را ثبت کنید.

"component" binding