├── .gitignore
├── 2WayDataBinding.html
├── 2WayDataBinding.js
└── README.md
/.gitignore:
--------------------------------------------------------------------------------
1 | ###########################
2 | #WebStorm Files
3 | ###########################
4 | .idea/
5 | *ipr
6 | *.iml
--------------------------------------------------------------------------------
/2WayDataBinding.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | 2 Way Data Binding
6 |
7 |
8 | Name:
9 |
10 |
11 | Age:
12 |
13 |
14 |
15 |
--------------------------------------------------------------------------------
/2WayDataBinding.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by Namita Malik on 26/3/15.
3 | */
4 |
5 | /*
6 | * I am here polluting the global object by making $scope as global scope variable, but this for the testing purpose
7 | * and sake of simplicity so that I can test from terminal
8 | * */
9 | var $scope = {};
10 | (function () {
11 | var bindClasses = ["name", "age"];
12 | var attachEvent = function (classNames) {
13 | classNames.forEach(function (className) {
14 | var elements = document.getElementsByClassName(className);
15 | for (var index in elements) {
16 | elements[index].onkeyup = function () {
17 | for (var index in elements) {
18 | elements[index].value = this.value;
19 | }
20 | }
21 | }
22 | Object.defineProperty($scope, className, {
23 | set: function (newValue) {
24 | for (var index in elements) {
25 | elements[index].value = newValue;
26 | }
27 | }
28 | });
29 |
30 | });
31 | };
32 | attachEvent(bindClasses);
33 | })();
34 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 2 Way Data Binding in Plain Vanilla JavaScript
2 |
3 |
4 | Whenever someone asks me about the advantages of **AngularJS** the first thing that simply comes into my mind is **2-way data binding**.
5 |
6 | For those who still aren't aware about it, **2-way data binding** means when you change anything in your model, view gets updated and on changing anything in the view, model gets updated.
7 |
8 | Everyone who knows **Angular**(having worked on it) or in fact has worked upon any other **JavaScript** framework(missed working on it) would actually know the beauty of this feature.
9 |
10 | Well, now let's try to simply implement this feature in pur own plain vanilla **JavaScript**.
11 |
12 | Let us take 4 text boxes to easily demonstrate **2-way data binding**. Here is our small piece of **HTML** code:
13 |
14 | ```HTML
15 |
16 |
17 |
18 |
19 | 2 Way Data Binding
20 |
21 |
22 | Name:
23 |
24 |
25 | Age:
26 |
27 |
28 |
29 |
30 | ```
31 | Now, let's have a look at our magical **JavaScript** code which will do wonders for us:
32 |
33 | ```JavaScript
34 | var $scope = {};
35 | (function () {
36 | var bindClasses = ["name", "age"];
37 | var attachEvent = function (classNames) {
38 | classNames.forEach(function (className) {
39 | var elements = document.getElementsByClassName(className);
40 | for (var index in elements) {
41 | elements[index].onkeyup = function () {
42 | for (var index in elements) {
43 | elements[index].value = this.value;
44 | }
45 | }
46 | }
47 | Object.defineProperty($scope, className, {
48 | set: function (newValue) {
49 | for (var index in elements) {
50 | elements[index].value = newValue;
51 | }
52 | }
53 | });
54 | });
55 | };
56 | attachEvent(bindClasses);
57 | })();
58 | ```
59 | Here is a detailed explanation of the above snippet:
60 |
61 | 1. We have taken the classes of the elements on which we need to apply **2-way Data Binding** in an array named ```bindClasses```.
62 |
63 | 2. Then we have an ```attachEvent``` which basically iterates through the classes passed in array ```bindClasses```.
64 |
65 | 3. We are extracting all the elements by using their class names ```document.getElementsByClassName(className)```.
66 |
67 | 4. Once the elements are extracted we are binding ```onkeyup``` event on it. When this event is triggered it calls a function which stores the current value inside the element.
68 |
69 | In this way we are successfully able to implement **2-way Data Binding** on our HTML.
70 |
71 | But how to update our **model**??
72 |
73 | Here is the explanation of the rest of the part of the code which actually updates the value in our model:
74 |
75 | 1. We have used ```object.defineProperty``` to define a property of an object. Here our object is **$scope** and property is **className**.
76 |
77 | 2. Then we have a **set** function which serves as **setter** of the property.
78 |
79 | 3. So, if you do something like - ```$scope.name="Hari"```, "Hari" would be passed as ```newValue```, which would ultimately replace the value being displayed on the view through the following piece of code ```elements[index].value = newValue```.
80 |
81 | Hurray!! We have now implemented the **2-way Data Binding** successfully.
82 |
83 | | Please note that this is just a small piece of code demonstrating **2-way Data Binding** using **JavaScript** this code can be improved a lot on the basis of element type.e We can also have a **getter** function for getting the value in ```$scope.name```. But for the sake of simplicity I have deliberately avoided it.
84 |
85 | Follow Me
86 | ---
87 | [Github](https://github.com/NamitaMalik)
88 |
89 | [Twitter](https://twitter.com/namita13_04)
90 |
91 | [LinkedIn](https://in.linkedin.com/in/namita-malik-a7885b23)
92 |
93 | [More Blogs By Me](https://namitamalik.github.io/)
--------------------------------------------------------------------------------