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

آموزش KnockoutJS-آموزش Binding متن در KnockoutJS

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

آموزش KnockoutJS-آموزش Binding متن در KnockoutJS

هدف

این binding باعث می شود که المان DOM مربوطه مقدار متن پارامتر شما را نمایش دهد.
این کار معمولا با المان هایی مانند < span > یا < em > که از قدیم وظیفه ی نمایش متن را بر عهده داشته اند، مفیدتر است. اما از نظر فنی می توانید از این binding در کنار هر المانی استفاده کنید.

مثال:

Today's message is: < span data-bind="text: myMessage" >< /span >
 
< script type="text/javascript" >
    var viewModel = {
        myMessage: ko.observable() // Initially blank
    };
    viewModel.myMessage("Hello, world!"); // Text appears
< /script >

پارامترها

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

استفاده از توابع و عبارت ها برای تامین مقادیر متنی

اگر بخواهید متن را به صورت برنامه ای تعیین کنید، یکی از راه ها ایجاد یک observable محاسبه شده و استفاده از تابع ارزیابی کننده ی آن به عنوان مکانی برای کدتان است تا بتواند تشخیص دهد که چه متنی را نمایش دهد. برای مثال:

The item is < span data-bind="text: priceRating" >< /span > today.
 
< script type="text/javascript" >
    var viewModel = {
        price: ko.observable(24.95)
    };
    viewModel.priceRating = ko.pureComputed(function() {
        return this.price()  > 50 ? "expensive" : "affordable";
    }, viewModel);
< /script >

حالا، هرموقع که price تغییر کند، متن بین “expensive” و “affordable” تغییر حالت می دهد.
به عنوان جایگزین اگر مانند مثال بالا پروژه تان پیچیده نیست، می توانید از observable محاسبه شده استفاده نکنید. در این صورت به جای این کار یک عبارت قراردادی جاوا اسکریپت را به binding متن انتقال دهید. برای مثال:

The item is < span data-bind="text: price()  > 50 ? 'expensive' : 'affordable'" >< /span > today.

در مثال بالا بدون اینکه از observable محاسبه شده ی priceRating استفاده کرده باشید به نتیجه ی یکسانی می رسید.

در رابطه با رمز گذاری HTML ( HTML encoding)

با توجه به اینکه این binding مقدار متنی شما را با استفاده از یک گره متنی تظیم می کند، می توان بدون وارد کردن HTML یا script که مقدار ریسک کار را بالا می برند، بدون هیچ خطری از تمامی مقادیر رشته ای استفاده کرد. برای مثال اگر عبارت زیر را نوشته باشید:

viewModel.myMessage("< i >Hello, world!< /i >");

نتیجه ی آن به صورت متن italic (مایل) نمایش داده نمی شود. بلکه به صورت متنی واقعی همراه با براکت های قابل مشاهده خود را نشان می دهد. اگر قصد دارید که در این مورد از محتوای HTML استفاده کنید، به html binding مراجعه کنید.

استفاده از متن بدون المان نگهدارنده (container element)

گاهی اوقات ممکن است که نیاز باشد بدون وارد کردن المان اضافه ای برای binding متن، با استفاده از KnockoutJS متن را تنظیم کنید. برای مثال اگر این امکان برای شما وجود نداشته باشد که داخل یک المان option از المان دیگری استفاده کنید، در این صورت کدنویسی زیر کار درستی نیست.

< select data-bind="foreach: items" >
    < option >Item < span data-bind="text: name" >< /span >< /option >
< /select >

برای رفع این مشکل می توانید از سینتکس بدون نگهدارنده (containerless syntax) که مبتنی بر تگ های توضیحی (comment tags) هستند، استفاده کنید.

< select data-bind="foreach: items" >
    < option >Item < !--ko text: name-- >< !--/ko-- >< /option >
< /select >

توضیحات < !--ko-- > و < !--/ko-- > به عنوان نشانگرهای آغاز و پایان عمل می کنند و یک المان مجازی را تعریف می کنند که در درون خود markup را نگهداری می کنند. KnockoutJS این سینتکس این المان مجازی را فهمیده و مانند وقتی که شما از یک المان نگهدارنده ی واقعی استفاده کرده باشید، bind میشود.

اطلاعاتی در رابطه با رفتار عجیب فضای سفید (whitespace ) اینترنت اکسپلورر ورزن 6

اینترنت اکسپلورر ورژن 6 رفتار عجیبی از خود نشان می دهد. به این صورت که بعضی مواقع فضای سفیدی که بلافاصله به دنبال یک span خالی ایجاد شده باشد را نادیده می گیرد. این قضیه به صورت مستقیم هیچ ارتباطی با KnockoutJS ندارد، اما در صورتی که بخواهید متن زیر را بنویسید:

Welcome, < span data-bind="text: userName" >< /span > to our web site

در این صورت اینترنت اکسپلورر ورژن 6 قبل از کلمات to our web site هیچ فضای سفیدی نمایش نمی دهد. برای حل این مشکل می توانید یک متن دلخواه را درون < span > قرار دهید. مانند زیر:

Welcome, < span data-bind="text: userName" >& nbsp;< /span > to our web site.

مرورگرهای دیگر و ورژن های جدیدتر اینترنت اکسپلورر این مشکل را ندارند.

آموزش KnockoutJS-آموزش وابستگی ها در KnockoutJS

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

  • 194
  •    214
  • تاریخ ارسال :   1397/05/16

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

ارسال

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

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