MVVM nedir ? Two-way data binding nasıl işler ?
Bir MVVM şablonunda Model, View ve ViewModal bulunur. Şablon da adını bu üçünden alır. Günümüzdeki Angular, Vue, Flutter gibi yazılım geliştirme kitleri MVVM’yi kullanır. Peki bu sistem nedir, nasıl işler ?
MVVM bir diğer yaygın şablon olan MVC’den (Modal-View-Controller) farklı olarak yapısında ModalView bulundurur. ModalView’i anlamak için ise öncelikle Modal ile View’i anlamak gerekir.Modal,business logic ve datanın bulunduğu kısımdır. Veri tabanından veya herhangi bir veri kaynağından gelen verileri bulundurur. Vue’dan örnek vermek gerekirse burada aşağıdaki gibi javascript objeleri tutulur.
let data = { text : “Hello!”}
View’a ise direkt kullanıcı arayüzü diyebiliriz. Bu ikisi arasındaki bağlantıyı kuran kısım ise ViewModal’dir. ViewModal bir köprü görevi görerek view’ı dinler ve kullanıcı tarafından uygulanan işlemleri gerçekleştirir. Yine Vue frameworkünün çalışma mantığına bakarsak Vue direkt olarak ViewModel’da bulunur ve DOM’u yani view’i dinler. Örneğin bir binding işlemi varsa burada gerçekleşir.
Vue Çalışma Şablonu
Yukarıdaki Vue yapısı bize binding işleminin iki yönlü (two-way data binding) olmasını sağlar. Binding işlemi, bir objeyi başka bir obje ile bağlamaktır. Yani bir diğeri değiştiğinde diğer objeyi de anlık olarak etkilemesidir. Vue gibi frameworkler çıkmadan önce binding işlemi one-way olarak gerçekleşirdi. One way data binding işlemine örnek olarak bir inputun değeri değiştiğinde onun değeri model kısmında da anlık olarak değişir. Ya da tam tersi ile model kısmında değerin değişmesi ile view’da bulunan inputun değeri de anlık olarak değişir. Bu akış modelden view’a ya da view’dan modele olmak üzere iki tanedir ve one way olduğu zaman akış yönünün belirtildiği şekilde çalışır. Vue gibi yapılar ise değişkeni ViewModel’dan ileterek çift yönlü akışı sağlar. Yani akışın yönünü belirtmeye gerek kalmaz, iki taraftaki değişiklikte anlık olarak bir diğerini etkileyebilir.
Two-way Data Binding