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

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

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

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

هدف

hasFocus binding حالت تمرکز المانی از DOM را به مشخصه ی view model متصل می کند. این binding یک binding دو طرفه محسوب می شود. بنابراین:

  • اگر مشخصه ی view model را بر روی true یا false قرار دهید، المان مربوطه متمرکز یا نامتمرکز خواهد شد.
  • اگر کاربر به صورت دستی بر این المان مربوطه تمرکز کند، یا تمرکز خود را از آن بردارد، در این صورت به ترتیب مشخصه ی view model بر روی true یا false قرار می گیرد.

در صورتی که بخواهید form های پیچیده ای را بسازید به گونه ای که در این form ها المان های قابل ویرایش به صورت پویا نمایش داده شوند، همچنین اگر بخواهید که نقطه ی شروع تایپ کاربر را کنترل کنید یا به مکان ^ (caret) واکنش نشان دهید، این binding بسیار مفید خواهد بود.

مثال 1 : اصول اولیه

در صورتی که کاربر بر روی textbox متمرکز شود (داخل textbox کلیک کند)، این مثال پیامی را نمایش می دهد. همچنین برای اینکه نشان دهد که شما می توانید به صورت برنامه ای focus را فعال کنید از دکمه ای استفاده می کند.


دوره آموزش Angular

Source code: View

< input data-bind="hasFocus: isSelected" / >
< button data-bind="click: setIsSelected" >Focus programmatically< /button >
< span data-bind="visible: isSelected" >The textbox has focus< /span >

Source code: View model

var viewModel = {
    isSelected: ko.observable(false),
    setIsSelected: function() { this.isSelected(true) }
};
ko.applyBindings(viewModel);

مثال 2 : کلیک کردن برای انجام ویرایش (Click-to-edit)

با توجه به اینکه hasFocus binding در هر دو جهت کار می کند (تنظیم مقدار مربوطه باعث متمرکز شدن یا نامتمرکز شدن المان می شود، متمرکز شدن یا نامتمرکز شدن المان باعث تنظیم مقدار مربوطه می شود)، استفاده از “edit” mode می تواند کارتان را آسان کند. در این مثال بر اساس مشخصه ی editing مدل رابط کاربری یک المان < span > و یا یک المان < input > را نمایش می دهد. نامتمرکز شدن المان < input > باعث می شود که editing بر روی false قرار گیرد و به دنبال آن رابط کاربری از حالت “edit” خارج شود.


دوره آموزش Angular

Source code: View

< p >
    Name: 
    < b data-bind="visible: !editing(), text: name, click: edit" > < /b >
    < input data-bind="visible: editing, value: name, hasFocus: editing" / >
< /p >
< p >< em >Click the name to edit it; click elsewhere to apply changes.< /em >< /p >

Source code: View model

function PersonViewModel(name) {
    // Data
    this.name = ko.observable(name);
    this.editing = ko.observable(false);
         
    // Behaviors
    this.edit = function() { this.editing(true) }
}
 
ko.applyBindings(new PersonViewModel("Bert Bertington"));

پارامترها

  • پارامتر اصلی
    • برای متمرکز کردن المان مربوطه true (یا مقداری که نتیجه ی ارزیابی آن true شود) را وارد کنید. در غیر این صورت المان مربوطه نامتمرکز خواهد شد.
    • زمانی که کاربر به صورت دستی بر المان متمرکز می شود، یا از حالت تمرکز خارج می شود، مقدار شما به ترتیب بر روی true یا false قرار می گیرد.
    • در صورتی که مقداری که شما وارد می کنید قابل مشاهده باشد، هرزمان که این مقدار قابل مشاهده تغییر کند، hasFocus binding حالت تمرکز المان را آپدیت می کند.
  • پارامترهای اضافی
    • ندارد

وابستگی ها

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

  • 146
  •    194
  • تاریخ ارسال :   1397/05/22

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

ارسال

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

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