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

آموزش KnockoutJS-آموزش attr bindin در KnockoutJS

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

آموزش KnockoutJS-آموزش attr bindin در KnockoutJS

هدف

این binding روشی کلی برای تنظیم مقدار تمام ویژگی های (attribute ) المان مربوطه ی DOM را ارائه می کند. فرض کنید که بخواهید ویژگی title یک المان ، src مربوط به تگ img ، یا href لینکی را بر اساس مقادیر موجود در view model تان تنظیم کنید، به گونه ای که مقدار این ویژگی هر زمان که مشخصه ی مدل متناظر تغییر کند، به صورت خودکار آپدیت شود، در این صورت این binding برایتان مفید است.

مثال:

< a data-bind="attr: { href: url, title: details }" >
    Report
< /a >
 
< script type="text/javascript" >
    var viewModel = {
        url: ko.observable("year-end.html"),
        details: ko.observable("Report including final year-end statistics")
    };
< /script >

این مثال ویژگی href المان را بر روی year-end.htmlو ویژگی title المان را بر روی Report including final year-end statistics تنظیم می کند.

پارامترها

  • پارامتر اصلی
    • شما باید شیء جاوا اسکریپتی را به برنامه ی خود بدهید که اسم مشخصه های (property ) به کار رفته در آن با اسم ویژگی ها و مقادیر استفاده شده در آن با مقادیر ویژگی ای که می خواهید استفاده کنید مطابقت داشته باشد.
      اگر پارامترتان به یک مقدار قابل مشاهده اشاره داشته باشد، در اینصورت این binding هر زمان که مقادیر قابل مشاهده تغییر کنند، attribute (ویژگی) را آپدیت می کند. اما در صورتی که پارامترتان به مقدار قابل مشاهده ای اشاره نداشته باشد، در اینصورت این binding تنها یک بار attribute را تنظیم می کند، و در آینده دیگر آن را آپدیت نخواهدکرد.
  • پارامترهای اضافی
    • ندارد
نکته :

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

فرض کنید که می خواهید این attribute را به کار بگیرید: data-something
در این صورت عبارت زیر را نمیتوانید بنویسید:

< div data-bind="attr: { data-something: someValue }" >...< /div >

زیرا در این جا data-somethingبه عنوان یک نام شناسه ی قانونی تلقی نمی شود. برای حل این مشکل تنها کافیست که نام شناسه را داخل نقل قول قرار دهید. به گونه ای که این شناسه به یک رشته ی لفظی تبدیل شود زیرا این رشته یک شیء قانونی در جاوااسکریپت تلقی می شود. برای مثال:

< div data-bind="attr: { 'data-something': someValue }" >...< /div >
نکته :

استفاده از کلمات ذخیره شده به عنوان اسامی attribute در مرورگرهای قدیمی تر

استفاده از اسامی ذخیره شده ی جاوا اسکریپت به عنوان اسامی attribute در مرورگرهای قدیمی تر (اینترنت اکسپلورر ورژن 8 و کمتر) باعث بروز خطا می شود. برای حل این مشکل می توانید به صورت زیر از نقل قول استفاده کنید:

< input data-bind="attr: { 'for': someValue }" / >

می توانید در صفحه ی MDN فایرفاکس لیست خوبی از کلمات ذخیره شده پیدا کنید.

وابستگی ها

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

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

  • 156
  •    196
  • تاریخ ارسال :   1397/05/16

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

ارسال

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

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