-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdataBinder.html
152 lines (116 loc) · 3.55 KB
/
dataBinder.html
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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Jquery Ng</title>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
function DataBinder( object_id ) {
// Use a jQuery object as simple PubSub
var pubSub = jQuery({});
// We expect a `data` element specifying the binding
// in the form: data-bind-<object_id>="<property_name>"
var data_attr = "bind-" + object_id, // bind-123
message = object_id + ":change"; // 123: change
// Listen to change events on elements with the data-binding attribute and proxy
// them to the PubSub, so that the change is "broadcasted" to all connected objects
jQuery(document).on( "change", "[data-" + data_attr + "]", function( evt ) {
var $input = jQuery( this );
pubSub.trigger( message, [ $input.data( data_attr ), $input.val() ] );
});
// PubSub propagates changes to all bound elements, setting value of
// input tags or HTML content of other tags
pubSub.on(message, function( evt, prop_name, new_val ) {
jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function() {
var $bound = jQuery( this );
if ( $bound.is("input, textarea, select") ) {
$bound.val( new_val );
} else {
$bound.html( new_val );
}
}
);
});
return pubSub;
}
function User( uid ) {
var binder = new DataBinder( uid ),
user = {
attributes: {},
// The attribute setter publish changes using the DataBinder PubSub
set: function( attr_name, val ) {
this.attributes[ attr_name ] = val;
binder.trigger( uid + ":change", [ attr_name, val, this ] );
},
get: function( attr_name ) {
return this.attributes[ attr_name ];
},
_binder: binder
};
console.log(binder)
// Subscribe to the PubSub
binder.on( uid + ":change", function( evt, attr_name, new_val, initiator ) {
if ( initiator !== user ) {
user.set( attr_name, new_val );
}
});
return user;
}
function Binder(uid) {
var pub = jQuery({});
var data-attr = 'bind' + uid;
var msg = uid + ':change';
jQuery(document).on('cahnge', '[data-' + data-attr + ']', function(event) {
var $input = jQuery(this);
pub.trigger(msg, [$input.data(data-attr), $input.val()]);
} );
pub.on(msg, function(event, prop_name, value) {
jQuery('[data-' + data-attr + '=' + prop_name + ']').each(function() {
var $item = jQuery(this);
if(item.is('select input textarea')) {
$item.val(value);
} else {
$item.text(value);
}
});
})
return pub;
}
function User(uid) {
var bind = new Binder(uid);
var user = {
attributes: {},
set: function(attr-name, value) {
this.attributes[] =
bind.trigger(uid + ':change', [attr-name, val, this]);
},
get: function() {
return this.attributes[]
}
};
bind.on(uid + ':change', function(event, attr-name, value, initiator) {
if(initiator != user) {
user.set()
}
})
}
</script>
</head>
<body>
<input type="number" data-bind-123="name" />
<input type="number" data-bind-123="name" />
<input type="number" data-bind-123="name" />
<input type="number" data-bind-123="name" />
<span data-bind-123="name"></span>
<script type="text/javascript">
var user = new User( 123 );
user.set( "name", "345" );
n = 0 ;
setInterval(function() {
user.set( "name",n)
n ++
console.log(user.get('name'));
}, 1000)
</script>
</body>
</html>