نویسنده اسماعیل شیدایی

شنبه 1 آذر 1393 - 18:52

آموزش Knockout (بخش اول)

بسم الله الرحمن الرحیم

باتوجه به تمایل دوستان به کتابخانه های Angular و knockout پس از دوره ای که در خصوص Angular برگزار کردیم. انشالله در این دوره قصد داریم با کتابخانه knockout آشنا شویم و از آن در پروژه های خود استفاده کنیم.

در صورتی که در دوره آموزش Angular شرکت نکردید پیشنهاد می کنیم، این دوره را حتما بررسی کنید، برای مشاهده این دوره می توانید از طریق لینک زیر اقدام کنید.

آموزش Angular

آموزش Knockout

دوره آموزشی Knockout

بخش اول

بسم الله الرحمن الرحیم

آموزش Angular

آموزش Knockout

دوره آموزشی Knockout

بخش اول

در این دوره آموزشی قرار است شما معماری Model-View-ViewModel (MVVM) را با استفاده از Knockout.js آموزش ببینید.
همچنین شما نحوه طراحی UI وب سایت خود را با استفاده از views و declarative bindingsیاد خواهید گرفت و داده های خود را به
و بتوانید اطلاعات خود را با استفاده از ویژگی dependency tracking مربوط به Knockout به صورت خودکار همگام (sync) نگه دارید.

تقریبا هر کسی فعالیت هایی با تکنولوژی های شناخته شده ای مانند jQuery داشته است، یا حداقل در مورد آن چیزهایی شنیده است. سادگی فوق العاده و conciseness این تکنولوژی زندگی میلیون ها توسعه دهنده در سرتاسر دنیا را ساده تر می کند که این واقعا فوق العاده است. البته متاسفانه jQuery راه حل مشکلی نیست و این طبیعی است. به محض اینکه شما تصمیم می گیرد تا برنامه های وبی که کمی پیچیدگی دارند را ایجاد کنید شما با یک مشکل مواجه می شوید، و آن مشکل این است که هیچ راه ساده ای برای طراحی UI وجود ندارد و همچنین نمی توانید به سادگی داده ها را بین عناصر مختلف انتقال دهید.

این جا همان جایی است که Knockout وارد می شود. Knockout یک کتابخانه JavaScript است که در ساخت UI هایی شبیه Desktop به شما بسیار کمک می کند. این ابزار تعاملات کاربر را با نرم افزار ساده می کند و همچنین یک رابط کاربری کاملا همگام با منبع داده شما ایجاد می کند به این معنی که در صورتی که اطلاعات در هر بخش تغییر داده شوند این تغییرات در سایر بخش ها منتشر خواهد شد. Knockoutیک مکانیزم مقید سازی (binding) دو طرفه را برای اتصال مابین بخش واسط کاربری با بخش Model شما (data model) ایجاد می کند، بنابراین ایجاد همگام سازی مابین آنها یک کار ساده است.

هر چند شما به استفاده همزمان از Knockout و jQuery نیاز دارید، مانند زمانی که می خواهید یک انیمیتشن برای انتقال عناصر گرافیکی صفحه استفاده کنید، Knockout خودش نیازی به jQuery ندارد. نکته دیگری که نیاز است شما بدانید این است که Knockout در رقابت با jQuery نیست و این دو ابزار برای مقاصد مختلف ایجاد شده اند و هر دو آنها در حوزه های کاری خودشان بسیار عالی کار می کنند. همچنین خواهید دید که اگر بخواهید از مزایای بیشتری بهرمند شوید باید از هر دو آنها استفاده کنید.
در این دوره آموزشی ما در ابتدا با مفاهیم و توانایی های Knockout آشنا می شویم و در بخش دوم ما به صورت عمیق تر مقید سازی های (bindings) خودمان را ایجاد و از آن استفاده می کنیم و در نهایت برخی از ویژگی های پیشرفته این تکنولوژی را مانند توسعه دادن observables و نحوه ساخت bindings های شخصی خودمان را بررسی خواهیم کرد. پس با نام خدا کار اصلی خودمان را شروع می کنیم.

Basic Concepts

قبل از اینکه به کدها و مثال ها بپردازیم، نیاز داریم با برخی از مفاهیم پایه آشنا شویم.
Knockout الگو (design pattern) معماری Model-View-View Model (MVVM) را برای JavaScript پیاده سازی می کند. همانطور که مشخص است در این معماری ما برنامه خودمان را به سه بخش و لایه تقسیم خواهیم کرد.

Model

یک Model داده های برنامه را نگه می دارد و این داده ها می تواند توسط کاربر وارد شود و یا به صورت JSON از یک وب سرور خوانده شود.

View

یک view که مانند یک اتصال دهنده عمل می کند ارتباط مابین view و Model ها را برقرار می کند. این بخش داده ها و عملیات ها را برای تغییر اطلاعات و نمایش آن ها در بخش UI نگهداری می کند.هر وقت data model تغییر داده شود بخش UI نیز مطابقا تغییر داده خواهد شد و باز خورد این تغییرات اعمال خواهد شد. View Model در برنامه شما با کدهای JavaScript نمایش داده می شود.

یک view که به تمام عناصر UI در برنامه اشاره دارد. این یک نمایش از ساختار و ظواهر برای UI داده شده است. View مسئول نمایش اطلاعات و دریافت داده های کاربر می باشد. View به وسیله کدهای HTML/CSS در برنامه شما نمایش داده خواهد شد.

در اینجا سه بخش و مفهوم اصلی از Knockout معرفی شده است:

1- Declarative Bindings

این بخش به شما اجازه می دهد بخش های UI خود را به data model خود با یک روش ساده و آسان به یکدیگر متصل کنید.
مهمترین مشکلی که می تواند دردسر ساز شود این سات که اگر شما به صورت مستقیم با استفاده از JavaScript بخواهید DOM را تغییر دهید این کار ممکن است در آینده باعث شود کد شما خراب شود زیرا اگر سلسله و ترتیب DOM ها یا ID آنها عوض شود طبیعتا کد شما دیگر کار نخواهد کرد و این یکی از مشکلاتی است که نگهداری و توسعه برنامه را سخت می کند.باdeclarative bindings حتی اگر DOM ها را تغییر دهید اتصال قسمتهای مختلف برنامه پابرجا باقی خواهد ماند!. شما می توانید داده ها را به DOM های مختلف تنها با استفاده از خاصیت data-bind به سادگی مقید کنید.

2- Dependency Tracking

خوشبختانه در مقید سازی و نوع های مشخصی از متغییر ها کهobservables (مشاهده پذیر) نامیده می شوند هر زمانی که model data شما تغییر داده شود تمامی بخش های وابسته به آن شروع به روز رسانی شدن می کنند. نیازی نیست شما نگران اضافه رکدن handler و یا listener خاصی برای اینکار باشید. همه این کارها به صورت داخلی به همراه اطلاع رسانی listener ها هنگامی که داده های سطح پایین تغییر داده می شوند توسط Knockout و observables انجام شده است نیازی نیست شما نکران باشید.

3- Templating

این مفهوم را وقتی برنامه شما کمی پیچیده می شود و به یک راه برای نمایش ساختاری غنی از view model data نیاز دارید درک خواهید کرد زیرا این مفهوم باعث می شود کد شما ساده بماند. Knockout با یک موتور Template (native) ساخته شده است که شما می توانید right away استفاده کنید. اما اگر شما بخواهید می توانید از یک موتور Template

third-party

شبیه jquery.tmpl یا Underscore نیز استفاده کنید.

اگر این مفاهیم برای شما مبهم است نگران نباشید. هنگامی که ما مثال ها و کدها را بررسی کنیم این مفاهیم همه برای شما واضح خواهند شد.