آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

آموزش مفهوم Observable ها در Knockout.js

دوره های مرتبط با این مقاله

Observables (آموزش مفهوم Observable ها در Knockout.js)

توجه:

کتابخانه ی Knockout بر سه اصل و ویژگی اساسی بنا شده است:

  1. Observable ها و dependency tracking (قابلیت بروز رسانی المان های رابط کاربری با تغییر در data model)
  2. Declarative binding (قابلیت اتصال بخش های مختلف از UI به data model)
  3. Templating (امکان استفاده از template engine برای نمایش داده ها در قالب UI های بهینه و کارآمدتر)

در این مبحث به شرح سه مفهوم فوق می پردازیم. اما پیش از آن لازم است الگوی MVVM و مفهوم view model را توضیح دهیم.

شرح الگوی MVVM و View Model

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

  1. Model : همان داده ها و اطلاعات ذخیره شده ی اپلیکیشن شما است، یا به عبارتی ساده نماینده ی اطلاعاتی است که در برنامه ی کاربردی با آن سروکار داریم. این اطلاعات بیانگر object ها (اشیا) و operation ها (عملیات) در business domain شما (مثلا حساب های بانکی که در آن ها انتقال وجه صورت می گیرد) است و از UI کاملا مستقل می باشد. به هنگام پیاده سازی پروژه با KO، معمولا با توابع AJAX (درخواست های ajax) کدهایی را از سمت سرور (server-side code) برای خواندن و نوشتن model data های ذخیره شده فراخوانی می کنیم.
  2. View Model: نمایشگر داده هایی است که می خواهید برای کاربر بر روی صفحه یا همان view به نمایش گذاشته شود. به بیان ساده می توان گفت که View Model پل ارتباطی بین model و view را تشکیل می دهد. برای مثال اگر یک list editor (ویرایشگر لیست) را پیاده سازی کنید، آنگاه view model شما یک شی خواهد بود که لیستی از آیتم ها را در خود نگه داشته و متدهایی را برای حذف/اضافه ی آیتم به لیست در اختیار شما قرار می دهد. لازم است دقت داشته باشید که در اینجا منظور به هیچ وجه خود UIنیست، در واقع از دکمه و نمود ظاهری هیچ خبری نیست. حتی data model ذخیره شده نیز مصداق view model نیست. بلکه view model آن لایه ی میانجی است که داده های ذخیره نشده ای که کاربر با آن ها تعامل دارد را در خود نگه می دارد (در واقع بیانگر منطق موقتی و اطلاعاتی است که برنامه کاربردی شما بر پایه ی آن کار می کند). View model اشیا خالص JavaScript ای هستند که هیچ گونه آگاهی از کد HTML ندارند. تعریف view model به عنوان یک لایه ی انتزاعی در ساده نگه داشتن آن کمک شایانی کرده و مدیریت رفتارهای پیچیده را سهل می کند. داده ها را در قالب یک کلاس (شی JavaScript تعریف کرده و داده ها را در آن قرار می دهیم و در نهایت برای نمایش به کاربر به view تحویل می دهیم).
  3. View : در واقع آن بخشی از برنامه که کاربر می بیند و با آن مسقیما تعامل دارد را view یا نما گویند. این لایه داده هایی را از view model گرفته و در نهایت برای سرویس گیرنده نمایش می دهد، و برای این منظور دستوراتی (برای مثال زمانی که کاربر بر روی یک دکمه کلیک می کند) را به view model ارسال می کند و همگام با تغییر در وضعیت view model، به واسطه ی declarative binding خودکار المان های مربوطه (در UI) را بروز رسانی می کند. view همان صفحه ی HTML است که توسط قابلیت declarative binding به view model متصل و در ارتباط می باشد (همراه با تغییر در view model، بخش های مرتبط در UI به واسطه ی declarative binding تغییر می کند). بجای این روش می توانید از template هایی استفاده کنید که داده هایی از view model گرفته و در خروجی HTML تولید می کند.
مثال:

برای ایجاد view model، کافی است یک شی JavaScript تعریف کنید. مثال:

var myViewModel = {
personName: 'Bob',
personAge: 123
}

سپس با بهره گیری از یک declarative binding (خصوصیت data-bind) می توانید یک view ساده از این view model بسازید. تگ (markup) زیر مقدار خاصیت (property) personName را برای کاربر نمایش می دهد:

The name is < span data-bind="text: personName" >< /span >

فعال سازی و استفاده از Knockout

اگرچه خصوصیت (attribute) data-bind جزئی از HTML نیست، اما خللی هم در آن ایجاد نمی کند و کاملا با ویرایش 5 این زبان نشانه گذاری سازگار می باشد (در HTML 4، این attribute برای validator شناخته شده نیست، با این حال می توان از آن استفاده کرد و مشکل خاصی رخ نخواهد داد). همان طور که می دانید، مرورگر هم این attribute را نمی شناسد و برای استفاده از آن ابتدا باید knockout را فعال نمایید. برای این منظور کافی است کد زیر را به تگ (بلوک)

  • 793
  •    4
  • تاریخ ارسال :   1395/05/20

دانشجویان گرامی اگر این مطلب برای شما مفید بود لطفا ما را در GooglePlus محبوب کنید
رمز عبور: tahlildadeh.com یا www.tahlildadeh.com
ارسال دیدگاه نظرات کاربران
شماره موبایل دیدگاه
عنوان پست الکترونیک

ارسال

آموزشگاه برنامه نویسی تحلیل داده
آموزشگاه برنامه نویسی تحلیل داده

تمامی حقوق این سایت متعلق به آموزشگاه تحلیل داده می باشد .