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

تنظیم مقدار data bind بر روی Style

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

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

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

مثال:

Profit Information

این مثال، هرگاه مقدار currentProfit کوچکتر از صفر شود، مقدار خاصیت (property) style.color را بر روی red تنظیم می کند و هر زمان که بزرگتر از صفر شود آن را برابر black قرار می دهد.

1. پارامتر اصلی:

· می بایست یک شی JavaScript باشد که در آن اسم property همان اسم style است و مقادیر آن برابر با مقادیری (style value) است که می خواهید اعمال شوند.

می توانید چندین مقدار style را یکجا برای اعمال به المان DOM پاس دهید. برای مثال اگر view model شما یک property به نام isService داشته باشد،آنگاه:

...

در صورتی که پارامتر به مقداری observable اشاره داشته باشد، binding مزبور هر گاه تغییری در مقدار observable ها تشخیص دهد، مقادیر style را بروز رسانی می کند. اما اگر به مقداری observable اشاره نداشته باشد، یکبار مقدار style را تنظیم می کند و دیگر آن را در آینده تغییر نمی دهد.

می توانید عبارات و توابع دلخواه JavaScript را به عنوان پارامتر پاس دهید. KO تابع یا عبارت ارسالی را ارزیابی کرده و سپس بر اساس مقادیر خروجی، تصمیم می گیرد کدام مقادیر style را اعمال کند.

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

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

اگر می خواهید یکی از style های font-weight یا text-decoration و یا هر style دیگری را که اسم آن از قوانین نام گذاری مورد تایید JavaScript پیروی نمی کند (چرا که برای مثال دارای "-" می باشد) اعمال کنید، در آن صورت لازم است نام style را بر اساس قوانین (نام گذاری) JavaScript تنظیم نمایید. برای مثال بجای { font-weight: someValue }; ، بنویسید ; { fontWeight: someValue } بنویسید.

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

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

ارسال

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

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