-
Notifications
You must be signed in to change notification settings - Fork 0
/
bindjs.js
87 lines (73 loc) · 2.12 KB
/
bindjs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
(function () {
var Z_MODEL = 'z-model';
var Z_VALUE = 'z-value';
var _keys = {};
var _viewers = {};
var _doms = document.querySelectorAll('['+Z_MODEL+']');
_doms.forEach(function(el) {
el._zModel = el.getAttribute(Z_MODEL);
el.addEventListener('input', onChange, false);
el.removeAttribute(Z_MODEL);
if (!_keys[el._zModel]) _keys[el._zModel] = [];
_keys[el._zModel].push(el);
_viewers[el._zModel] = document.querySelectorAll('['+Z_VALUE+'='+el._zModel+']');
})
var _obj = {};
function getDefaultValue(key) {
var els = _keys[key];
if (els && els.length) {
el = els[els.length - 1];
return el.value;
}
return null;
}
function updateViewers(key) {
var viewers = _viewers[key];
if (viewers && viewers.length) {
viewers.forEach(function(el) {
el.textContent = _obj[key];
})
}
}
function makeReactive (obj, key) {
var val = obj[key];
Object.defineProperty(obj, key, {
get: function () {
return val // Simply return the cached value
},
set: function (newVal) {
val = newVal; // Save the newVal
notify(key, newVal) // Ignore for now
}
})
}
// Iterate through our object keys
function observeData (obj) {
for (var key in obj) {
if (obj.hasOwnProperty(key)) {
makeReactive(obj, key);
}
}
}
function notify (key, newVal) {
var doms = _keys[key];
if (doms && doms.length) {
doms.forEach(function(dom) {
dom.value = newVal;
})
}
updateViewers(key);
}
function onChange(e) {
var key = this._zModel;
var value = e.target.value;
if (_obj.hasOwnProperty(key))
_obj[key] = value;
}
for (var key in _keys) {
_obj[key] = getDefaultValue(key);
updateViewers(key);
}
observeData(_obj);
window.zData = _obj;
})()