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

آموزش KnockoutJS-آموزش style binding در KnockoutJS

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

آموزش KnockoutJS-آموزش style bindingدر KnockoutJS

هدف

کار این binding حذف یا اضافه کردن مقادیر استایل (style values) به المان مربوطه ی DOM است. فرض کنید که یک مقدار عددی دارید که می خواهید بعد از اینکه کمتر از صفر شد آن را قرمز کنید، یا اینکه بخواهید عرض کادری را تغییر دهید که قرار است عرض آن همراه با تغییر مقدار عددی داخل آن، تغییر کند. در این صورت این binding برای شما مفید است.

نکته:

اگر می خواهید به جای استفاده از یک مقدار style صریح از یک کلاس CSS استفاده کنید به css binding مراجعه کنید.

مثال

< div data-bind="style: { color: currentProfit() <  0 ? 'red' : 'black' }" >
   Profit Information
< /div >
 
< script type="text/javascript" >
    var viewModel = {
        currentProfit: ko.observable(150000) // Positive value, so initially black
    };
    viewModel.currentProfit(-50); // Causes the DIV's contents to go red
< /script >

در این مثال هر زمان که مقدار currentProfit منفی شود مشخصه ی style.color به رنگ قرمز و هر زمان که این مقدار مثبت شود این مشخصه به رنگ مشکی در می آید.

پارامترها

  • پارامتر اصلی
    • شما باید شیء جاوا اسکریپتی را به برنامه ی خود بدهید که اسم مشخصه های به کار رفته در آن با اسم استایل ها و مقادیر استفاده شده در آن با مقادیر استایلی که می خواهید استفاده کنید مطابقت داشته باشد.
      در این حالت امکان تنظیم مقادیر استایل متعدد به صورت همزمان برای شما فراهم شده است. برای مثال اگر view model تان مشخصه ای به نام isSevere داشته باشد،
      < div data-bind="style: { color: currentProfit() <  0 ? 'red' : 'black', fontWeight: isSevere() ? 'bold' : '' }" >...< /div >
      
      اگر پارامترتان به یک مقدار قابل مشاهده اشاره داشته باشد، در اینصورت این binding هر زمان که مقادیر قابل مشاهده تغییر کنند، style ها را آپدیت می کند. اما در صورتی که پارامترتان به مقدار قابل مشاهده ای اشاره نداشته باشد، در اینصورت این binding تنها یک بار style ها را تنظیم می کند، و در آینده دیگر آن ها را آپدیت نخواهدکرد.
      مانند همیشه به عنوان مقادیر پارامتر می توانید از عبارت های قراردادی جاوا اسکریپت یا توابع آن استفاده کنید. ناک اوت این عبارت ها و توابع را ارزیابی کرده و برای تعیین اینکه کدام یک از مقادیر استایل باید به کار گرفته شود، از مقادیر حاصل شده استفاده می کند.
  • پارامترهای اضافی
      ندارد
نکته :

استفاده از style هایی که در حیطه ی اسامی متغیرهای قانونی جاوااسکریپت (legal JavaScript variable names ) قرار ندارند

اگر می خواهید از استایل font-weight یا text-decoration یا هر استایل دیگری که اسم آن به عنوان یک شناسه ی قانونی جاوا اسکریپت تلقی نمی شود (مثلا به این خاطر که این استایل شامل خط تیره است) استفاده کنید، باید از اسم جاوا اسکریپت برای آن استایل استفاده کنید. برای مثال:

  • شیوه ی نادرست نوشتن: { font-weight: someValue }
  • شیوه ی درست نوشتن: { fontWeight: someValue }
  • شیوه ی نادرست نوشتن: { text-decoration: someValue }
  • شیوه ی درست نوشتن: { textDecoration: someValue }

مطلب مرتبط: لیست کامل تری از اسم استایل ها و اسم معادل جاوا اسکریپت آن ها

وابستگی ها

به غیر از کتابخانه ی اصلی KnockoutJS وابستگی دیگری ندارد.

برای مطالعه سرفصل دورهAngular 6 کلیک نمایید .

  • 108
  •    146
  • تاریخ ارسال :   1397/05/16

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

ارسال

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

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