data binding در AngularJs

اول رفع مسئولیت را بخوانید!

Binding در AngularJs یکی از اولین نکات مورد توجه هر برنامه نویسی است. در واقع نوع binding ای که در این کتابخانه وجود دارد کمی با نوعی که شاید خیلی از ما آشنایی داشته باشیم متفاوت است. AngularJs بر خلاف بیشتر کتابخانه های client side به صورت پیش فرض two way data binding را پشتیبانی می کند.

AngularJs روش متفاوتی از اکثر کتابخانه های فعلی MVC موجود در بازار را برای ایجاد view در نظر گرفته است.

در اکثر کتابخانه های فعلی اتفاقی مانند ASP.NET MVC (فقط سمت client) برای view ها می افتد. با این روش که شما یک سری اطلاعات تحت نام  model به الگویی به نام view می دهید و یک موتور با استفاده از این اطلاعات و زبان خاص view در نهایت HTML به شما تحویل می دهد. در این حالت binding ای اتفاق نیفتاده است و اصطلاحا view مرده ای خروجی این کار بوده است. (تصویر پایین)

 

view-model-html
روش بیشتر کتابخانه ها برای تولید view

AngularJs روش متفاوتی در پیش گرفته است که اصطلاحا به آن two way data binding گفته می شود. علاوه بر این که به صورت داخلی engine ای برای ترکیب view و model برای تولید HTML دارد. امکان ارتباط دو طرفه نیز برای model که اینجا همان scope$ است و view ارائه می دهد. (با استفاده از syntax مربوط به خود) این view را اصطلاحا view زنده بنامیم!

همان طور که در مطلب سلام AngularJs گفتم این امکان را می توان خیلی ساده تعریف کرد.

پس از تولید نهایی HTML مربوط به view مورد نظر ما، اگر هر property از scope$ از طریق controller تغییر کند، تغییرات به صورت اتوماتیک به view اعمال می شوند. و بلعکس اگر در view تغییری در property ای از scope$ اتفاق افتد controller می تواند بر اساس تغییرات کار خاصی انجام دهد. (با استفاده از همان watch$)

روشی که angularJs برای ارتباط view و model دارد
روشی که angularJs برای ارتباط view و model دارد

با در نظر گرفتن مثال سلام AngularJs

JS Bin

ng-model: در این مثال دستوری که به view می گفت اطلاعات چه property ای از scope$ را در درون input قرار بدهد و هنگام تغییر در مقدار input تغییرات را در چه property ای اعمال کند ng-model بود. (scope.name$)

{{name}}: این دستور امکان استفاده از one way data binding در AngularJs است. این دستور به view می گوید مقدار name از scope$ را در مکان مورد نظر اعمال کند و این کار نیز هر زمان که name تغییر کرد تکرار خواهد شد.

watch$: این دستور همان بخشی را ایجاد می کند که گفتم model را قادر به observe کردن تغییرات اتفاق افتاده در view می کند. ورودی دستور watch$ می تواند نام property مورد نظر ما برای بررسی تغییر، باشد. در همان مثال ما به ازای هر تغییر در name عبارت “changed” را به انتهای property مورد نظرمان اضافه می کنیم.

مهم : روش متداول خوب برای data binding

با توجه به این که در AngularJs از prototypical inheritance برای پیاده سازی controller ها و scope$ های تو در تو استفاده می شود. (در مورد این موضوع بیشتر بحث خواهیم کرد) نیاز است که همیشه در نظر داشته باشید که به طور مستقیم در scope$ یک property ایجاد نکنید.

به طور مثال به جای ایجاد یک property به صورت زیر

یک شی جاواسکریپتی ایجاد کرده و property مورد نظر خود را در آن ایجاد کنید

بدیهی است وقتی می خواهیم مقدار این property را به جایی bind کنیم باید از {{person.name}} استفاده کنیم.

 

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *