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

آرایه در Knockout

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

آموزش Observable arrays

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

ObservableArray زمانی استفاده می شود که بخواهیید تغییرات یک مجموعه را تشخیص داده و به آن پاسخ دهید. در واقع از ObservableArray زمانی استفاده می شود که می خواهید یکسری مقادیر را پس از نمایش ویرایش کنید. به این ترتیب بعضی از بخش های UI، با هر بار حذف یا اضافه شدن عناصر، مکررا نمایش داده شده و یا ناپدید می شوند.

مثال
var myObservableArray = ko.observableArray(); // Initially an empty array
myObservableArray.push('Some value'); // Adds the value and notifies observers
نکته ی بسیار مهم:

observableArray خود اشیای موجود در آرایه را دنبال (track) می کند (کدام اشیا در آرایه هستند) و به وضعیت آن ها کاری ندارد.

صرف قرار دادن شی در observableArray، property های آن را observable نمی کند. در صورت تمایل می توان property های آن شی را نیز observable کرد که مقوله ی کاملا جدا است.

همان طور که در بالا ذکر شد، observableArray اشیایی را که دربرگرفته، رصد می کند و در زمان مناسب (هنگامی که اشیا به این آرایه اضافه یا از آن حذف می شوند)، listener ها (المان هایی که به تغییرات آن گوش می دهد) را با خبر می سازد.

آموزش پر کردن observableArray با مقادیر اولیه

اگر می خواهید observableArray را با مقادیر (اشیا) اولیه پر کنید، در آن صورت می توانید آن ها را به صورت آرایه به تابع سازنده (constructor) پاس دهید. مثال:

var anotherObservableArray = ko.observableArray([
           { name: "Bungle", type: "Bear" },
           { name: "George", type: "Hippo" },
           { name: "Zippy", type: "Unknown" }
       ]);

آموزش خواندن اطلاعات از یک observableArray

در پشت پرده، observableArray یک observable ساده است که مقدار آن از نوع آرایه می باشد (البته دارای ویژگی های دیگر هم هست که در زیر به شرح آن ها خواهیم پرداخت). بنابراین می توانید با فراخوانی observableArray مانند یک تابع و بدون پارامتر، به آرایه ی زیرساختی که یک آرایه ی متعارف JavaScript است دسترسی داشته باشید. پس از آن می توانید از آرایه ی زیرساختی JavaScript اطلاعات را بخوانید:

alert('The length of the array is ' + myObservableArray().length);
alert('The first element is ' + myObservableArray()[0]);

برای انجام عملیات مختلف بر روی آرایه، البته می توان از هر یک از توابع درون ساخته و native جاوا اسکریپت استفاده کرد. اما گزینه ی بهتری وجود دارد که در زیر به آن اشاره می کنیم:

KO توابع معادلی برای کار با observableArray دارد که از جهاتی بهتر توابع درون ساخته ی JavaScript هستند.

  1. با تمامی مرورگرهایی که در آن بکار می روند سازگار هستند (به عنوان مثال، تابع indexOf جاوا اسکریپت در مرورگر IE 8 یا نسخه های قدیمی تر آن کار نمی کند، اما indexOf کتابخانه ی KO تقریبا در تمامی مروگرها به درستی کار می کند).
  2. برای توابعی که محتوای آرایه را ویرایش می کنند همچون push و splice، معادل های KO قابلیت dependency tracking را فعال سازی کرده و بدین وسیله تمامی listener ها (المان های گوش فرادهنده) را از تغییرات با خبر نگه می دارد و به دنبال آن المان های مربوطه در UI به صورت خودکار بروز رسانی می شود.
  3. Syntax و ساختار نحوی KO آسان تر و به نسبت کارامد تر است. برای فراخوانی متد push کتابخانه ی KO، کافی است myObservableArray.push(...) را بنویسید. این ساختار نگارشی به نسبت خواناتر و زیباتر از معادل JavaScript آن است که به این صورت نوشته می شود: myObservableArray().push(...).

در ادامه به شرح توابع observableArray که عملیات خواندن و نوشتن در آرایه را انجام می دهند، می پردازیم.

آموزش تابع indexOf

این تابع اندیس (شماره ی مکان قرارگیری) اولین آیتم آرایه را که با پارامتر ورودی همخوانی دارد، برمی گرداند. برای مثال،myObservableArray.indexOf('Blah') اندیس (که از صفر شروع می شود) اولین آیتم آرایه را که همان Blah می باشد، برمی گرداند یا در صورت یافت نشدن مقدار منطبق، مقدار -1 را برمی گرداند.

آموزش slice

تابع slice معادل observableArray تابع درون ساخته ی جاوا اسکریپت یا همان slice است که دو پارامتر ورودی می گیرد. اولی اندیس شروع که از آنجا برش را آغاز و تا پارامتر دوم که اندیس پایان است ادامه می دهد، سپس آن را استخراج و در خروجی برمی گرداند. بنابراین فراخوانی myObservableArray.slice(...) در واقع معادل فراخوانی همان تابع درون ساخته ی JavaScript بر روی آرایه ی زیرساختی است (یعنی myObservableArray().slice(...)).

آموزش توابع ویرایش محتوا یک observableArray

observableArray مجموعه ای از توابع را برای ویرایش محتوای آرایه و با خبر کردن listener ها از تغییرات ارائه می دهد که در زیر به شرح کاربرد هریک می پردازیم: pop، push، shift، unshift، reverse، sort، splice.

  • push(value) –آیتم جدیدی را به انتهای آرایه اضافه می کند.
  • ()pop –آخرین مقدار یا عنصر را از آرایه حذف کرده و در خروجی برمی گرداند.
  • unshift(value)–آیتم جدیدی را به ابتدای آرایه الحاق می کند.
  • ()shift –اولین آیتم آرایه را حذف کرده و در خروجی بازمی گرداند.
  • ()reverse –ترتیب المان های داخل آرایه را معکوس کرده و سپس observableArray را در خروجی برمی گرداند (نه آرایه ی زیرساختی را).
  • ()sort– محتوای آرایه را مرتب نموده و observableArray را در خروجی برمی گرداند. در حالت پیش فرض مرتب سازی بر اساس ترتیب حروف الفبا صورت می گیرد، با این حال می توان با ارسال یک تابع به عنوان پارامتر نحوه ی مرتب سازی آرایه را مدیریت کرد. این تابع باید دو شی از آرایه پذیرفته و در صورتی که آرگومان اول کوچکتر بود، مقدار منفی و در صورتی که آرگومان دوم کوچکتر بود، مقدار مثبت و یا در صورت مساوی بودن مقدار 0 را برگرداند. برای مثال جهت مرتب سازی آرایه ای از اشیا ‘person’ بر اساس lastname، می توانید بنویسید:
    myObservableArray.sort(function (left, right) { return left.lastName == right.lastName ? 0 : (left.lastName
  • ()splice – آیتم هایی را به آرایه اضافه کرده یا از آن حذف می کند. در واقع دو پارامتر ورودی می گیرد که اولین پارامتر اندیس شروع و دومین پارامتر تعداد آیتم ها را مشخص می کند. به عنوان مثال، کد myObservableArray.splice(1, 3)، از اندیس شروع برش را آغاز کرده و تا سه المان (المان دوم، سوم و چهارم) را از آن به صورت آرایه برمی گرداند.

آموزش توابع remove و removeAll

KO تعدادی تابع کاربردی هم خود، برای انجام عملیات بر روی آرایه ارائه می دهد که در زمره ی توابع درون ساخته ی JavaScript قرار ندارند:

  • remove(someItem) –تمامی مقادیری که برابر یک آیتم مشخص (پارامتر معین) هستند را حذف و در خروجی به صورت آرایه برمی گرداند.
  • remove( function (item) { return item.age < 18;} ) –تمامی آیتم هایی که مقدار خاصیت (property) age آن کوچکتر از 18 هست را حذف کرده و آن ها را در قالب آرایه برمی گرداند.
  • removeAll( ['Chad', 132, undefined] ) –تمامی مقادیری که برابر 'Chad'، 123 یا undefined می باشد را حذف کرده و آن ها را به صورت آرایه در خروجی برمی گرداند.
  • removeAll() – تمامی مقادیر را حذف کرده و آن ها را به صورت آرایه در خروجی برمی گرداند.

آموزش توابع destroy و destroyAll (توجه: این بخش معمولا بیشتر به برنامه نویسان Ruby on Rails مربوط می شود)

توابع destroy و destroyAll عمدتا برای راحتی کار توسعه دهندگان چارچوب نرم افزاری Ruby on Rails تعبیه شده است:

  • destroy (someItem) –تمامی اشیایی که با پارامتر ورودی (آیتم مشخصی) برابر و منطبق هستند را یافته و سپس property خاصی به نام _destroy با مقدار true را به آن ها تخصیص می دهد.
  • destroy( function (someItem) { return someItem.age < 18;} ) –تمامی اشیای موجود در آرایه که مقدار خاصیت (property) age آن ها کمتر از 18 هست را پیدا کرده و سپس property خاصی به نام _destroy با مقدار true را به آن ها اختصاص می دهد.
  • destroyAll( ['Chad', 132, undefined] )–تمامی اشیای درون آرایه که با 'Chad'، 123 یا undefined برابر و منطبق هستند را یافته و سپس به آن ها property ای به نام _destroy با مقدار true را تخصیص می دهد.
  • ()destroyAll–به تمامی اشیا موجود در آرایه یک property به نام _destroy که مقدارش بر روی بولی true تنظیم شده، تخصیص می دهد.

حال این سوال پیش می آید که از _destroy برای چه منظور استفاده می شود؟ همان طور که در بالا گفته شد، این مبحث تنها برای توسعه دهندگان Rails مرتبط می باشد. در Rails یک convention یا قرارداد وجود دارد که هنگامی که یک object graph از نوع JSON را به action پاس می دهید، framework (چارچوب نرم افزاری) مزبور آن را به صورت خودکار به ActiveRecord object graph تبدیل کرده و سپس آن را در پایگاه داده ذخیره می کند. (framework) می داند کدام اشیا از قبل در پایگاه داده موجود هستند و دستورات INSERT و UPDATE مربوطه را صادر می کند. برای اینکه به این framework اعلان کنیم یک رکورد یا سطر را DELETE کند، فقط آن را با خاصیت _destroy که مقدارش بر روی true تنظیم شده، علامت گذاری می کنیم.

به هنگام render (نمایش) اشیایی که با foreach به UI متصل می شوند (منظور data-bind="foreach)، KO به صورت خودکار آن دسته از object هایی را که با= true _destroy علامت گذاری شده باشند را پنهان می کند (خاصیت _destroy به آن ها تخصیص داده شده و مقدارش نیز بر روی true تنظیم شده باشد). از این رو می توان یک دکمه ی “delete” داشت که با کلیک آن، متد destroy(someItem) را بر روی آرایه صدا زده و سبب می شود آیتم مشخص شده بلافاصله از UI و دید کاربر حذف شود. بعده ها که JSON object graph را به Rails ارسال می کنید، آن آیتم از پایگاه داده نیز حذف می شود (این در حالی است که سایر آیتم ها به طور معمول در پایگاه داده درج شده یا در آن بروز رسانی می شوند).

آموزش به تاخیر اندارختن و / یا محدود کردن اطلاع رسانی از تغییرات (change notification ها)

به طور معمول، یک observableArray تمامی subscriber ها (المان های گوش فرادهنده) را بلافاصله از تغییرات خود با خبر می کند. اما در شرایطی که یک observableArray به طور مکرر تغییر می کند یا مجبور است بروز رسانی های سنگین انجام دهد، شما می توانید با محدود کردن یا به تاخیر انداختن notification ها سرعت و کارایی را بهینه نمایید. برای این منظور کافی است از rateLimit به عنوان یک extender مانند زیر استفاده نمایید:

// Ensure it notifies about changes no more than once per 50-millisecond period
myViewModel.myObservableArray.extend({ rateLimit: 50 });
  • 654
  •    4
  • تاریخ ارسال :   1395/05/20

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

ارسال

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

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