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

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

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

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

هدف

این binding باعث می شود که المان مربوطه ی DOM ، HTML ای را نمایش دهد که توسط پارامتر شما مشخص شده است.
استفاده از این binding معمولا زمانی مفیدتر است که مقادیر موجود در view model تان رشته هایی از HTML markup باشند که قصد دارید آن ها نمایش دهید.

مثال

< div data-bind="html: details" >< /div >
 
< script type="text/javascript" >
    var viewModel = {
        details: ko.observable() // Initially blank
    };
    viewModel.details("< em >For further details, view the report < a href='report.html' >here< /a >.< /em >"); // HTML content appears
< /script >

پارامترها

  • پارامتر اصلی
    • KnockoutJS نوشته های قبلی را پاک کرده و محتوای المان را با استفاده از تابع HTML جی کوئری یا با تجزیه ی رشته به گره های HTML ، بر روی مقدار پارامترتان قرار میدهد. و سپس در صورت عدم وجود جی کوئری هرکدام از گره ها را به عنوان زیرمجموعه ای از المان پیوست می کند.
      اگر این پارامتر مقدار قابل مشاهده ای باشد، در این صورت binding هر زمان که این مقدار تغییر کند متن المان را آپدیت می کند. اما اگر این پارامتر قابل مشاهده نباشد، تنها یک بار متن المان را تنظیم می کند و دیگر آن را آپدیت نخواهد کرد.
      اگر شما چیزی غیر از عدد یا رشته (برای مثال شیء یا آرایه) را در کدتان قرار دهید، در این صورت innerHTML با yourParameter.toString() برابری می کند.
  • پارامترهای اضافی
    • ندارد

در رابطه با کدگذاری HTML

با توجه به اینکه این binding محتوای المان شما را با استفاده از innerHTML تنظیم می کند، باید مراقب باشید که از آن در کنار مقادیر مدل غیرقابل اطمینان استفاده نکنید. زیرا در این صورت ممکن است که در معرض حمله ی تزریق متن ( script injection attack) قرار گیرد. اگر امن بودن متنی که قرار است نمایش داده شود را می توانید تضمین کنید (برای مثال اگر مبتنی بر ورودی متفاوتی از کاربر باشد که در databaseشما ذخیره شده است) در اینصورت می توانید از text binding استفاده کنید که مقدار متنی المان را با استفاده از innerText یا textContent تنظیم می کند.

وابستگی ها

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

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

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

ارسال

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

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