Permalink
Browse files

NEW DEMO!

  • Loading branch information...
1 parent 538c3e9 commit 139a0132866153045fb3fac706ae27b4340ed5c1 @subtleGradient committed Oct 21, 2008
Showing with 88 additions and 32 deletions.
  1. +6 −12 Demos/ObservableHash.html
  2. +65 −0 Demos/ObservableHash.js
  3. +17 −20 Source/Plugins/ObservableData.js
View
@@ -4,22 +4,16 @@
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>ObservableHash</title>
+ <style type="text/css" media="screen">
+ textarea{width:520px;height:340px;}
+ </style>
</head>
<body>
-<p>
- Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-</p>
-
<script type="text/javascript" src="mootools.js"> </script>
+<script src="../Source/Plugins/HashClass.js" type="text/javascript" charset="utf-8"></script>
+<script src="../Source/Plugins/ObservableData.js" type="text/javascript" charset="utf-8"></script>
<script src="../Source/Plugins/ObservableHash.js" type="text/javascript" charset="utf-8"></script>
-<script type="text/javascript" charset="utf-8">
-
-var myThing = new ObservableHash({
- option1: 1,
- option8: true
-});
-
-</script>
+<script src="ObservableHash.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
View
@@ -0,0 +1,65 @@
+
+
+// Create a new blank ObservableHash instance
+var myObservableHash = new ObservableHash();
+
+
+
+window.addEvent('domready',function(){
+
+
+
+ // Create the empty variable to put my element when I create it
+ var pre;
+
+
+
+ // Every time any value is set, log it to the console
+ if(console && console.log)
+ myObservableHash
+ .observeAdd(function(){console.log([ "Add", arguments ].flatten());})
+ .observeSet(function(){console.log([ "Set", arguments ].flatten());})
+ ;
+
+
+
+ myObservableHash
+
+ // When this value is added to myObservableHash, create this html element
+ .observeAdd('PRE_HTML',function(value){
+
+ pre = new Element('pre', { html:value }).inject(document.body);
+
+ })
+
+ // Every time the PRE_HTML is set, it will set the html of the PRE tag to the value of PRE_HTML
+ .observeSet('PRE_HTML',function(value){
+
+ pre.set('html', value);
+
+ })
+
+ ;
+
+
+
+ // Make a new TEXTAREA
+ // whenever you type into it
+ // set the value of PRE_HTML to the TEXTAREA value
+ new Element('textarea',{ text:'Type stuff here!' })
+ .inject(document.body)
+ .addEvent('keyup',function(e){
+
+ myObservableHash.set('PRE_HTML', this.value);
+
+ })
+ ;
+
+
+
+ // NOTE:
+ // The PRE has no idea there is a TEXTAREA
+ // The TEXTAREA has no idea there is a PRE
+ //
+ // They are simply both setting and getting values from the same central ObservableHash
+});
@@ -18,13 +18,13 @@ var ObservableData = {
if(this.get(key) == value)
return this;
+ if(this.has && !this.has(key))
+ this.fireEvent('add:'+key, [value, key])
+ .fireEvent('add', [value, key]);
+
this.fireEvent('set:'+key, [value, key])
.fireEvent('set', [value, key]);
- if(this.has && !this.has(key)) this
- .fireEvent('add:'+key, [value, key])
- .fireEvent('add', [value, key]);
-
this.parent(key,value);
return this;
},
@@ -49,35 +49,32 @@ var ObservableData = {
observeAdd: function(key,fn){
- if($type(key)!='function') return this;
+ if($type(key)=='function')
+ return this.addEvent('add', key);
- return this
- .addEvent('add:'+key, fn)
- .addEvent('add', key);
+ return this.addEvent('add:'+key, fn)
},
observeGet: function(key,fn){
- if($type(key)!='function') return this;
+ if($type(key)=='function')
+ return this.addEvent('get', key);
- return this
- .addEvent('get:'+key, fn)
- .addEvent('get', key);
+ return this.addEvent('get:'+key, fn)
},
observeSet: function(key,fn){
- if($type(key)!='function') return this;
+ if($type(key)=='function')
+ return this.addEvent('set', key);
- return this
- .addEvent('set:'+key, fn)
- .addEvent('set', key);
+ return this.addEvent('set:'+key, fn)
},
observeErase: function(key,fn){
- if($type(key)!='function') return this;
+ if($type(key)=='function')
+ return this.addEvent('erase', key);
- return this
- .addEvent('erase:'+key, fn)
- .addEvent('erase', key);
+ return this.addEvent('erase:'+key, fn)
}
+
};

0 comments on commit 139a013

Please sign in to comment.