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

تنظیم data bind بر روی css

دوره های پیشنهادی

آموزش Knockout.js- "css" binding (تنظیم data bind بر روی "css")

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

مثالی با کلاس های static

در این مثال، هرگاه مقدار currentProfit به زیر صفر می رود، کلاس CSS ای به نام profitWarning اعمال شده و هنگامی که مقدار بالای صفر می رود، کلاس ذکر شده حذف می شود.

Profit Information

مثالی با کلاس های dynamic

Profit Information

در مثال جاری، هرگاه مقدار currentProfit بالای صفر است، کلاس CSS ای به نام profitPositive اعمال می شود و در غیر این صورت کلاس profitWarning اعمال می شود.

پارامترها

1. پارامتر اصلی: اگر از (اسم) کلاس استاتیک CSS استفاده می کنید، در آن صورت می توانید یک شی JavaScript را به عنوان پارامتر ارسال کنید که در آن اسم property ها برابر اسم کلاس های CSS شما هستند و مقدارشان بر اساس اینکه کلاس باید با توجه به شرط جاری اعمال شود یا خیر، بر روی مقدار بولی true یا false تنظیم می گردد. می توانید همزمان چند کلاس CSS را به عنوان پارامتر ارسال کنید (set کنید). به عنوان مثال، اگر view model دارای property ای به نام isSevere باشد، آنگاه:

حتی می توانید چندین کلاس CSS را بر اساس شرط واحد با قرار دادن آن داخل علامت نقل و قول، یکجا تنظیم (set) کنید:

مقادیر غیر بولی به صورت تقریبی تفسیر می شود. برای مثال، 0 و null به عنوان false در نظر گرفته می شوند، در حالی که مقدار عددی 21 و اشیا غیر null به عنوان true تفسیر می شوند. اگر پارامتر ارسالی شما به مقدار observable اشاره کند، binding با توجه به تغییر در مقدار observable، کلاس CSS را اضافه یا حذف می کند. اگر پارامتر به مقدار observable اشاره نداشته باشد، فقط یکبار کلاس را اضافه/حذف کرده و در آینده تغییری در آن ایجاد نمی کند.

اگر می خواهید از (اسم) کلاس های داینامیک CSS استفاده کنید، آنگاه می توانید یک رشته به عنوان پارامتر پاس دهید که به کلاس یا کلاس های CSS ای که می خواهید به المان اضافه کنید، اشاره دارد (منطبق است). اگر پارامتر به مقدار observable اشاره کند، در آن صورت binding تمامی کلاس هایی که قبلا اضافه شده بود را حذف می کند و سپس کلاس یا کلاس هایی را که با مقدار جدید observable منطبق هستند، اضافه می کند.

همان طور که قبلا ذکر شد، می توانید عبارت ها یا توابع دلخواه JavaScript را به عنوان پارامتر ارسال کنید. KO عبارات یا توابع پاس داده شده به عنوان پارامتر را ارزیابی می کند و کلاس های مناسب CSS را بر اساس نتیجه ی خروجی (برای اضافه/حذف) تشخیص داده و انتخاب می کند.

2. پارامترهای اضافی: ندارد.

نکته: اعمال کلاس های CSS که اسم آن ها از قوانین نام گذاری مورد تایید و مجاز متغیر در JavaScript پیروی نمی کند

اگر بخواهید یک کلاس CSS با نام my-class را اعمال کنید، نمی توانید از ساختار و کد زیر استفاده نمایید:

...

چرا که my-class یک شناسه یا اسم مجاز محسوب نمی شود. برای حل این مشکل کافی است اسم کلاس را داخل علامت نقل و قول قرار داده تا به یک string literal (رشته) تبدیل شود که استفاده از آن در object literal جاوا اسکریپت کاملا صحیح و منطبق با قوانین JavaScript می باشد.

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

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

ارسال

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

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