Dynamic data binding in HTML and JS
Good day to all.
If you ask one of the following questions:
Then you are under the cat ...
And yes ... at the end, as always, a link to the code;)
About MVP:
MVP (Model-View-Presenter) is one of the most common UI design patterns.
Its essence is as follows:
Immediately, the key difference between MVP and MVC: MVP, in contrast to MVC, has a two-way connection with the View.
Remember and move on ...
About MVVM:
MVVM (Model-View-ViewModel) is an improved form of MVP, and the line between them is so thin that sometimes you think: “Oh, the sky! Why are you so with me? ”
')
Now I will explain what I mean.
The essence of MVVM is as follows:
If we drop the formalities, then it is. That's why I said that the line between MVP and MVVM is very thin.
Globally, the only difference is that MVVM implements a more flexible event listener from View.
What does it do in such a way that the so-called declarative dynamic data binding becomes available.
Pro dynamic data binding:
This is a mechanism by which, changing the value of the model from either side (from the View or Model side), this change will immediately take effect. That is, by changing the value in the Model (in MVVM, the ViewModel partially assumes the function of the model), it will immediately appear in View and vice versa.
You may ask: “If MVP has a two-way connection between View and Presenter, then why can't we implement dynamic data binding on MVP?”.
The answer is very simple - we can!
In fact, MVP already implies dynamic data binding to one degree or another.
And, if MVP is a purely imperative approach to data binding, then MVVM is declarative.
That's the whole difference.
But the essence of them is the same!
About implementation:
Now consider the issues related to the implementation of dynamic data binding.
Let's start with the fact that, at the moment, the browser is not able to dynamically track changes in values in variables.
Of course, there is such a thing as Object.observe (), but this thing is not yet part of the standard.
Therefore, we proceed from the fact that
Accordingly, it is necessary to somehow understand: when you need to synchronize between the Model and View.
In modern frameworks, such as Angular or Knockout, this is a very simple approach: listeners hang on various events from an element that needs dynamic data binding.
For example, for text input, a listener is hung up on a keyup event.
For button - click
Etc.
Inside the handler, the new data is read and then the mechanism for synchronizing it with the Model is started.
That's the whole story.
By the way, if you use Angular, then, most likely, you very often have to resort to using such things as the $ timeout service ...
If you use $ timeout on automatism, because it is written somewhere on stack overflow, but you do not understand its essence, then know that $ timeout waits until the current $ digest loop ends, then executes the code you passed to it, and then starts the $ digest cycle again. This is exactly how data is updated if it was initiated from outside the Angular internals.
What is the $ digest loop?
In AngularJS, this is precisely the process of synchronizing values between Model and View.
And, as promised, a link to Gist , which implements the simplest dynamic data binding.
In a few words:
Thanks for attention.
If you ask one of the following questions:
- What is dynamic data binding?
- How does data binding work in AngularJS or similar MVVM frameworks?
- what the hell is MPV different from MVVM?
Then you are under the cat ...
And yes ... at the end, as always, a link to the code;)
About MVP:
MVP (Model-View-Presenter) is one of the most common UI design patterns.
Its essence is as follows:
- Presenter subscribes to events from View
- View issues events
- Presenter catches events and makes requests in Model
- Upon receiving a response from the Model, the Presenter updates the View.
Immediately, the key difference between MVP and MVC: MVP, in contrast to MVC, has a two-way connection with the View.
Remember and move on ...
About MVVM:
MVVM (Model-View-ViewModel) is an improved form of MVP, and the line between them is so thin that sometimes you think: “Oh, the sky! Why are you so with me? ”
')
Now I will explain what I mean.
The essence of MVVM is as follows:
- ModelView subscribes to events from View
- View issues events
- ModelView catches events and makes requests in Model
- When receiving a response from the Model, ModelView updates the View.
If we drop the formalities, then it is. That's why I said that the line between MVP and MVVM is very thin.
Globally, the only difference is that MVVM implements a more flexible event listener from View.
What does it do in such a way that the so-called declarative dynamic data binding becomes available.
Pro dynamic data binding:
This is a mechanism by which, changing the value of the model from either side (from the View or Model side), this change will immediately take effect. That is, by changing the value in the Model (in MVVM, the ViewModel partially assumes the function of the model), it will immediately appear in View and vice versa.
You may ask: “If MVP has a two-way connection between View and Presenter, then why can't we implement dynamic data binding on MVP?”.
The answer is very simple - we can!
In fact, MVP already implies dynamic data binding to one degree or another.
And, if MVP is a purely imperative approach to data binding, then MVVM is declarative.
That's the whole difference.
But the essence of them is the same!
About implementation:
Now consider the issues related to the implementation of dynamic data binding.
Let's start with the fact that, at the moment, the browser is not able to dynamically track changes in values in variables.
Of course, there is such a thing as Object.observe (), but this thing is not yet part of the standard.
Therefore, we proceed from the fact that
the browser is not able to dynamically track changes in values in variables
Accordingly, it is necessary to somehow understand: when you need to synchronize between the Model and View.
In modern frameworks, such as Angular or Knockout, this is a very simple approach: listeners hang on various events from an element that needs dynamic data binding.
For example, for text input, a listener is hung up on a keyup event.
For button - click
Etc.
Inside the handler, the new data is read and then the mechanism for synchronizing it with the Model is started.
That's the whole story.
By the way, if you use Angular, then, most likely, you very often have to resort to using such things as the $ timeout service ...
If you use $ timeout on automatism, because it is written somewhere on stack overflow, but you do not understand its essence, then know that $ timeout waits until the current $ digest loop ends, then executes the code you passed to it, and then starts the $ digest cycle again. This is exactly how data is updated if it was initiated from outside the Angular internals.
What is the $ digest loop?
In AngularJS, this is precisely the process of synchronizing values between Model and View.
And, as promised, a link to Gist , which implements the simplest dynamic data binding.
In a few words:
- select all elements that have a data-bind attribute
- register these items as listeners to model changes
- we hang up on document the general handler which will make synchronization between View and Model
Thanks for attention.
Source: https://habr.com/ru/post/277451/
All Articles