uki 1.0.1 → 1.0.2

data/VERSION

@@ -1 +1 @@
-1.0.1
+1.0.2

data/bin/uki

@@ -7,7 +7,7 @@ require 'commander/import'
 require File.join(UKI_ROOT, 'lib', 'uki')
 
 program :name, 'uki tools'
-program :version, '1.0.0'
+program :version, File.read(File.join(UKI_ROOT, 'VERSION'))
 program :description, 'uki development tools'
 
 
@@ -63,6 +63,40 @@ command :'new model' do |c|
   end
 end
 
+command :'new layout' do |c|
+  c.syntax = 'uki new layout <name>'
+  c.summary = 'Create uki layout'
+  c.description = "Create template for uki layout with given <name> 
+    and add include to the project file"
+  c.example "Create myapp.layout.editor()", "uki new layout editor"
+  c.example "Create view in arbitary package", "uki new layout mypackage.editor"
+  
+  c.when_called do |args, options|
+    path = args.shift or raise 'Layout name required'
+    project = Uki::Project.new('.')
+    path = "#{project.name}.layout.#{path}"
+    project.create_function 'layout.js', path 
+    say "Layout #{path} created"
+  end
+end
+
+command :'new controller' do |c|
+  c.syntax = 'uki new controller <name>'
+  c.summary = 'Create uki controller'
+  c.description = "Create template for uki controller with given <name> 
+    and add include to the project file"
+  c.example "Create myapp.controller.editor()", "uki new controller editor"
+  c.example "Create view in arbitary package", "uki new controller mypackage.editor"
+  
+  c.when_called do |args, options|
+    path = args.shift or raise 'Controller name required'
+    project = Uki::Project.new('.')
+    path = "#{project.name}.controller.#{path}"
+    project.create_function 'controller.js', path 
+    say "Controller #{path} created"
+  end
+end
+
 command :run do |c|
   c.syntax = 'uki run [host[:port]]'
   c.summary = 'Run development server'
@@ -96,7 +130,24 @@ command :build do |c|
     target = args.shift || 'build'
     project = Uki::Project.new('.')
     project.build target, :compile => !option.nocompiler
-    say "Build complete at `#{target}'"
+    say "Build complete at '#{target}'"
+  end
+end
+
+command :ie_images do |c|
+  c.syntax = 'uki ie_images [file]'
+  c.summary = 'Creates image files for IE6,7'
+  c.description = 'Creates image files for IE6,7 from
+    data urls in the theme file.
+    
+    [file] defaults to <project_name>/theme.js
+  '
+  c.when_called do |args, option|
+    project = Uki::Project.new('.')
+    target = args.shift || File.join(project.name, 'theme.js')
+    place = project.ie_images target
+    say "IE images are at #{place}"
   end
+  
 end
 

data/frameworks/uki/README.rdoc

@@ -1,22 +1,64 @@
 = UKI – simple UiKit for complex Web apps
-Uki is a 
-JavaScript 
-user interface toolkit for desktop-like web applications.
-It comes with 
-a rich view-component library 
-ranging from Sliders to Grids and SplitPanes.
+Uki is a JavaScript user interface toolkit for desktop-like web applications.
+It comes with a rich view-component library ranging from Sliders to Grids and SplitPanes.
 
     uki({ view: 'Button', text: 'Click me', rect: '10 10 100 24' }).attachTo( window );
     
     uki('Button[text^=Click]').click(function() { alert(this.text()); });
     
+    
+== All you have to know in 5 minutes 
+1. Uki interfaces are created from Views the same way web pages are created from DOM nodes.
+   Views even behave similar to DOM nodes. You can appendView, insertBefore, access parentView etc.
+    panel.appendView(button) 
+   Examples of views: Slider, SplitPane or Table
+2. View have attributes. You can read them by calling attrname() without params and write with
+   attrname(newValue).
+    label.text('Lorem') // set text to a label
+    label.text() == 'Lorem' // get text
+    splitPane.handlePosition(300) // move the split pane handle to 300px
+3. You can create Views with uki() function. 
+   Once created view can be attached to any block DOM container with attachTo()
+    uki({ view: 'Label', text: 'Lorem', ... more attributes ... }).attachTo( window )
+4. You can find attached views using css-like selectors. 
+    uki('Label') // find all labels on page
+    uki('Box[name=main] > Label') // find all immediate descendant Labels in a box with name = "main"
+5. uki() calls return Collection of Views. This is similar to jQuery('expression') result. You can 
+   access individual views with [index]. You can manipulate all views at the same 
+   time with a number of collection methods (http://ukijs.org/docs/symbols/uki.Collection.html)
+    uki('Label')[3] // get 3-d found label
+6. Events are bound to Views (not individual DOM nodes) with the bind() function
+    uki('Label')[0].bind('click', function() {  handle the event here  }) // bind click to the first label
+    uki('Label').bind('click', function() {  handle the event here  }) // bind click to all labels
+    uki('Label').unbind('click') // unbind all click handlers from all labels
+7. Views are laid out with initial position and resize rules. Initial position is set with the rect property
+    button.rect('50 20 100 22') // set left = 50px, top = 20px, width = 100px, height = 22px
+   Resize rules are set with the anchors property:
+    button.anchors('left top') // stay at the left top when container resizes
+    button.anchors('right bottom') // move with the bottom right corner of the container
+    button.anchors('left top right') // stay at the top, resize width with the container
+   You can pass both rect and anchors to the uki() function:
+    uki({ view: 'Button', rect: '50 20 100 22', anchors: 'left top right' })
+8. You can change visual appearance of the views with themes. Theme is basically a collection of 
+   resources like images, styled dom nodes and backgrounds. You can find an example of one
+   at http://github.com/voloko/uki/blob/master/src/uki-theme/airport.js
+9. If your adding uki to existing project then it is better to simply add
+    <script src='http://static.ukijs.org/pkg/0.1.3/uki.gz.js'></script>
+   to your pages and it will work. If you start a new one you might try
+   uki-tools (http://github.com/voloko/uki-tools)
+10. See the available resources in Links section and have fun
+  
+    
+
+
 == Links
  * API docs at http://ukijs.org/docs/
  * Google group http://groups.google.com/group/ukijs
- * Code examples at http://github.com/voloko/uki/tree/master/app/functional/
+ * Code examples at http://ukijs.org/examples/
  * Development docs and tutorial at http://wiki.github.com/voloko/uki/
  * Google wave in 100 lines of code example: http://ukijs.org/examples/core-examples/wave
  
+ 
 == Contribute
 To install development server
 1. Install ruby http://ruby-lang.org

data/frameworks/uki/spec/unit/data/model.spec.js

@@ -9,7 +9,7 @@ describe 'uki.data.Model'
     end
     
     it 'should update model'
-        model.change({ firstName: 'John', lastName: 'Smith' })
+        model.update({ firstName: 'John', lastName: 'Smith' })
         model.firstName.should.be 'John'
         model.lastName.should.be 'Smith'
     end
@@ -19,11 +19,22 @@ describe 'uki.data.Model'
             e.fields.should.eql ['name']
             e.changes.name.should.not.be_null
         });
-        model.change({ name: 'something' });
+        model.update({ name: 'something' });
     end
     
-    it 'should use 2 params call'
-        model.change('name', 'John Smith')
-        model.name.should.be 'John Smith'
+    it 'should allow accesor methods'
+        uki.data.model.addFields(model, ['firstName', 'lastName'])
+        model.update({ firstName: 'John', lastName: 'Smith' })
+        model.firstName().should.be 'John'
+        model.lastName().should.be 'Smith'
+    end
+    
+    it 'should trigger change with accessor methods'
+        uki.data.model.addFields(model, ['firstName', 'lastName'])
+        model.bind('change', function(e) {
+            e.fields.should.eql ['firstName']
+            e.changes.firstName.should.be_true
+        });
+        model.firstName('something')
     end
 end

data/frameworks/uki/spec/unit/dom.spec.js

@@ -9,7 +9,7 @@ describe 'uki.dom'
 
     it 'should create stylesheets'
         x = uki.createElement('div')
-        x.className = 'test' + uki.dom.guid++
+        x.className = 'test' + uki.guid++
         uki.dom.createStylesheet('.' + x.className + ' { display: inline !important; }')
         uki.dom.probe(x, function() {
             uki.dom.computedStyle(x).display.should.be 'inline'

data/frameworks/uki/spec/unit/utils.spec.js

@@ -1,5 +1,5 @@
 describe 'uki.utils'
-    utils = uki.utils;
+    utils = uki;
     
     it 'should test isFunction'
         var f1 = function() {};

data/frameworks/uki/src/uki-core/background/sliced9.js

@@ -52,7 +52,7 @@ uki.background.Sliced9 = uki.newClass(new function() {
 
     /** @ignore */
     function img (setting, style) {
-        return uki.imageHTML(setting[0], setting[1], setting[2], ' ondragstart="return false;" galleryimg="no" style="-webkit-user-drag:none;position:absolute;' + style + '"');
+        return uki.imageHTML(setting[0], setting[1], setting[2], ' ondragstart="return false;" galleryimg="no" style="-webkit-user-drag:none;-webkit-user-select:none;-moz-user-select:none;position:absolute;' + style + '"');
     }
     
     /** @ignore */

data/frameworks/uki/src/uki-core/collection.js

@@ -62,9 +62,9 @@ uki.fn = uki.Collection.prototype = new function() {
      */
     this.attr = function( name, value ) {
         if (value !== undefined) {
-            this.each(function() {
-                uki.attr( this, name, value );
-            });
+            for (var i=0; i < this.length; i++) {
+                uki.attr( this[i], name, value );
+            };
             return this;
         } else {
             return this[0] ? uki.attr( this[0], name ) : '';
@@ -167,7 +167,7 @@ uki.fn = uki.Collection.prototype = new function() {
     @name uki.Collection#focusable */
     /** @function
     @name uki.Collection#style */
-    uki.Collection.addAttrs('dom html text background value rect checked anchors childViews typeName id name visible disabled focusable style draggable textSelectable'.split(' '));
+    uki.Collection.addAttrs('dom html text background value rect checked anchors childViews typeName id name visible disabled focusable style draggable textSelectable width height minX maxX minY maxY left top x y'.split(' '));
 
     /** @function
     @name uki.Collection#parent */
@@ -267,7 +267,7 @@ uki.fn = uki.Collection.prototype = new function() {
         		this.bind(name, handler);
     	    } else {
                 for (var i=0; i < this.length; i++) {
-                    this[i].trigger(name);
+                    this[i][name] ? this[i][name]() : this[i].trigger(name);
                 };
     	    }
     		return this;

data/frameworks/uki/src/uki-core/dom/dnd.js

@@ -54,6 +54,7 @@ var dragEndEvents = 'mouseup ' + (dnd.nativeDnD ? ' dragend' : '');
 // if (window.attachEvent && !window.opera) dragEndEvents += ' mouseleave';
 
 function startGesture (el) {
+    if (dnd.draggable) return;
     dnd.draggable = el;
     uki.dom.bind(doc, 'mousemove scroll', draggesture);
     uki.dom.bind(doc, dragEndEvents, draggestureend);
@@ -68,6 +69,7 @@ function stopGesture () {
 }
 
 function draggesturestart (e) {
+    e = new uki.dom.Event(e);
     e.type = 'draggesturestart';
     uki.dom.handler.apply(this, arguments);
     if (!e.isDefaultPrevented()) {
@@ -77,6 +79,7 @@ function draggesturestart (e) {
 }
 
 function draggesture (e) {
+    e = new uki.dom.Event(e);
     e.type = 'draggesture';
     e.dragOffset = (new Point(e.pageX, e.pageY)).offset(dnd.position);
     uki.dom.handler.apply(dnd.draggable, arguments);
@@ -84,6 +87,7 @@ function draggesture (e) {
 }
 
 function draggestureend (e) {
+    e = new uki.dom.Event(e);
     e.type = 'draggestureend';
     e.dragOffset = (new Point(e.pageX, e.pageY)).offset(dnd.position);
     uki.dom.handler.apply(dnd.draggable, arguments);

data/frameworks/uki/src/uki-core/dom/event.js

@@ -48,9 +48,9 @@ uki.extend(uki.dom, /** @lends uki.dom */ {
 		if ( el.setInterval && el != window )
 			el = window;
 			
-        listener.huid = listener.huid || uki.dom.guid++;
+        listener.huid = listener.huid || uki.guid++;
         
-        var id = el[expando] = el[expando] || uki.dom.guid++,
+        var id = el[expando] = el[expando] || uki.guid++,
             handler = uki.dom.handlers[id] = uki.dom.handlers[id] || function() {
                 uki.dom.handler.apply(arguments.callee.elem, arguments);
             },
@@ -76,13 +76,18 @@ uki.extend(uki.dom, /** @lends uki.dom */ {
     
     unbind: function(el, types, listener) {
         var id = el[expando],
-            huid = listener.huid,
+            huid = listener && listener.huid,
             i, type;
-        types = types.split(' ');
+        if (types) {
+            types = types.split(' ');
+        } else {
+            types = [];
+            uki.each(uki.dom.bound[id] || [], function(k, v) { types.push(k); });
+        }
         for (i=0; i < types.length; i++) {
             type = types[i];
-            if (!huid || !id || !uki.dom.bound[id] || !uki.dom.bound[id][type]) continue;
-            uki.dom.bound[id][type] = uki.grep(uki.dom.bound[id][type], function(h) { return h.huid !== huid; });
+            if (!id || !uki.dom.bound[id] || !uki.dom.bound[id][type]) continue;
+            uki.dom.bound[id][type] = listener ? uki.grep(uki.dom.bound[id][type], function(h) { return h.huid !== huid; }) : [];
             
             if (uki.dom.bound[id][type].length == 0) {
                 var handler = uki.dom.handlers[id];
@@ -103,8 +108,10 @@ uki.extend(uki.dom, /** @lends uki.dom */ {
             handlers = uki.dom.bound[id],
             i;
             
-        e = new uki.dom.Event(e);
-        e = uki.dom.fix( e );
+        if (!e.domEvent) {
+            e = new uki.dom.Event(e);
+            e = uki.dom.fix( e );
+        }
         
         if (!id || !handlers || !handlers[type]) return;
         

data/frameworks/uki/src/uki-core/dom/w3cdnd.js

@@ -178,9 +178,19 @@ include('event.js');
             
             var handler = function(e) {
          	    if (dnd.dataTransfer && retriggering) {
+                    e = new uki.dom.Event(e);
          	        e.type = source;
          	        e.dataTransfer = dnd.dataTransfer;
+         	        if (source == 'dragover') {
+         	            dnd.__canDrop = false;
+         	        } else {
+                        stopW3Cdrag(this);
+         	            if (!dnd.__canDrop) return;
+     	            }
          	        uki.dom.handler.apply(this, arguments);
+         	        if (e.isDefaultPrevented()) {
+         	            dnd.__canDrop = true;
+     	            }
                  }
          	};
          	
@@ -211,6 +221,7 @@ include('event.js');
         e.dataTransfer = new uki.dom.DataTransferWrapper(dataTransfer);
         uki.dom.handler.apply(this, arguments);
         dataTransfer.effectAllowed = e.dataTransfer.effectAllowed;
+        dataTransfer.dropEffect = e.dataTransfer.dropEffect;
     }
 
     function startW3Cdrag (element) {
@@ -218,14 +229,16 @@ include('event.js');
     }
 
     function stopW3Cdrag (element) {
+        if (!dnd.dataTransfer) return;
         dnd.dataTransfer.cleanup();
         dnd.dragOver = dnd.dataTransfer = dnd.target = null;
         uki.dom.unbind( element, 'draggestureend', dragend );
     }
     
     function dragenter (e) {
-        if (!dnd.dataTransfer || e.domEvent.__dragOver) return;
-        e.domEvent.__dragOver = true;
+        if (!dnd.dataTransfer || e.domEvent.__dragEntered || !retriggering) return;
+        e = new uki.dom.Event(e);
+        e.domEvent.__dragEntered = true;
         if (dnd.dragOver == this) return;
         dnd.dragOver = this;
         e.type = 'dragenter';
@@ -234,7 +247,8 @@ include('event.js');
     
     function drag (e) {
         if (retriggering) {
-            if (!e.domEvent.__dragOver && dnd.dragOver) {
+            if (!e.domEvent.__dragEntered && dnd.dragOver) {
+                e = new uki.dom.Event(e);
                 e.type = 'dragleave';
                 uki.dom.handler.apply(dnd.dragOver, arguments);
                 dnd.dragOver = null;
@@ -262,6 +276,7 @@ include('event.js');
         } else {
             return;
         }
+        e = new uki.dom.Event(e);
         uki.dom.handler.apply(this, arguments);
         if (e.isDefaultPrevented()) {
             stopW3Cdrag(this);

data/frameworks/uki/src/uki-core/dom.js

@@ -8,8 +8,6 @@ include('utils.js');
  * @author voloko
  */
 uki.dom = {
-    guid: 1,
-    
     /**
      * Convenience wrapper around document.createElement
      * Creates dom element with given tagName, cssText and innerHTML
@@ -23,7 +21,7 @@ uki.dom = {
         var e = doc.createElement(tagName);            
         if (cssText) e.style.cssText = cssText;
         if (innerHTML) e.innerHTML = innerHTML;
-        e[expando] = uki.dom.guid++;
+        e[expando] = uki.guid++;
         return e;
     },
     

data/frameworks/uki/src/uki-core/uki.js

@@ -28,7 +28,8 @@ root.uki = root.uki || function(val, context) {
  * @type string
  * @field
  */
-uki.version = '0.1.2';
+uki.version = '0.1.3';
+uki.guid = 1;
 
 /**
  * Empty function

data/frameworks/uki/src/uki-core/utils.js

@@ -58,7 +58,7 @@ var utils = {
             result = function() {
                 return fn.apply(context, args.concat(slice.call(arguments, 0)));
             };
-        result.huid = fn.huid = fn.huid || uki.dom.guid++;
+        result.huid = fn.huid = fn.huid || uki.guid++;
         return result;
     },
     
@@ -107,7 +107,7 @@ var utils = {
             '"': '"',
             "'": '''
         };
-        return html.replace(/[&<>\"\']/g, function(c) { return trans[c]; });
+        return (html + '').replace(/[&<>\"\']/g, function(c) { return trans[c]; });
     },
     
     /**

data/frameworks/uki/src/uki-core/view/base.js

@@ -286,8 +286,9 @@ uki.view.declare('uki.view.Base', uki.view.Observable, uki.view.Styleable, funct
             if (s === undefined) return this[prop] || new Size();
             this[prop] = Size.create(s);
             this.rect(this._parentRect);
-            if (this[prop].width) this._dom.style[name + 'Width'] = this[prop].width + PX;
-            if (this[prop].height) this._dom.style[name + 'Height'] = this[prop].height + PX;
+            this._dom.style[name + 'Width'] = this[prop].width ? this[prop].width + PX : '';
+            this._dom.style[name + 'Height'] = this[prop].height ? this[prop].height + PX : '';
+            return this;
         };
     }, this);
     
@@ -426,7 +427,7 @@ uki.view.declare('uki.view.Base', uki.view.Observable, uki.view.Styleable, funct
     @name uki.view.Base#left */
     /** @function
     @name uki.view.Base#top */
-    uki.each(['width', 'height', 'minX', 'maxX', 'minY', 'maxY', 'left', 'top'], function(index, attr) {
+    uki.each(['width', 'height', 'minX', 'maxX', 'minY', 'maxY', 'x', 'y', 'left', 'top'], function(index, attr) {
         this[attr] = function(value) {
             if (value === undefined) return uki.attr(this.rect(), attr);
             uki.attr(this.rect(), attr, value);

data/frameworks/uki/src/uki-core/view/focusable.js

@@ -4,40 +4,48 @@ include('observable.js');
 /**
  * @class
  */
-uki.view.Focusable = /** @lends uki.view.Focusable.prototype */ {
+uki.view.Focusable = new function() {/** @lends uki.view.Focusable.prototype */ 
+    
     // dom: function() {
     //     return null; // should implement
     // },
-    _focusable: true, // default value
+    this._focusable = true; // default value
+    this._focusOnClick = true;
+    
+    this.focusOnClick = uki.newProp('_focusOnClick');
     
-    focusable: uki.newProp('_focusable', function(v) {
+    this.focusable = uki.newProp('_focusable', function(v) {
         this._focusable = v;
-        this._updateTabIndex();
+        if (v) this._initFocusable();
+        this._updateFocusable();
     }),
     
-    disabled: uki.newProp('_disabled', function(d) {
+    this.disabled = uki.newProp('_disabled', function(d) {
+        var changed = d !== !!this._disabled;
         this._disabled = d;
         if (d) this.blur();
-        this._updateTabIndex();
-        if (this._updateBg) this._updateBg();
+        this._updateFocusable();
+        if (changed && this._updateBg) this._updateBg();
     }),
     
-    _updateTabIndex: function() {
-        if (this._focusTarget) {
-            if (this._focusable && !this._disabled) this._focusTarget.setAttribute('tabIndex', 1)
-            else this._focusTarget.removeAttribute('tabIndex');
+    this._updateFocusable = function() {
+        if (this._preCreatedFocusTarget || !this._focusTarget) return;
+        
+        if (this._focusable && !this._disabled) {
+            this._focusTarget.style.display = 'block';
+        } else {
+            this._focusTarget.style.display = 'none';
         }
     }, 
     
-    _initFocusable: function(preCreatedInput) {
-        this._focusTarget = preCreatedInput;
-
-        if (!preCreatedInput) {
-            this._focusTarget = root.opera ? uki.createElement('div', 'position:absolute;left:-999px;top:0;width:1px;height:1px;') : this.dom();
-            if (root.opera) this.dom().appendChild(this._focusTarget);
-            this._updateTabIndex();
-            this._focusTarget.style.outline = 'none';
-            this._focusTarget.hideFocus = true;
+    this._initFocusable = function(preCreatedFocusTarget) {
+        if ((!preCreatedFocusTarget && !this._focusable) || this._focusTarget) return;
+        this._focusTarget = preCreatedFocusTarget;
+        this._preCreatedFocusTarget = preCreatedFocusTarget;
+        
+        if (!preCreatedFocusTarget) {
+            this._focusTarget = uki.createElement('input', 'position:absolute;left:-9999px;top:0;width:1px;height:1px;');
+            this.dom().appendChild(this._focusTarget);
         }
         this._hasFocus = false;
         this._firstFocus = true;
@@ -45,48 +53,60 @@ uki.view.Focusable = /** @lends uki.view.Focusable.prototype */ {
         uki.dom.bind(this._focusTarget, 'focus', uki.proxy(function(e) {
             if (!this._hasFocus) this._focus(e);
         }, this));
+        
         uki.dom.bind(this._focusTarget, 'blur', uki.proxy(function(e) {
-            if (this._hasFocus) this._blur(e);
+            if (this._hasFocus) {
+                this._hasFocus = false;
+                setTimeout(uki.proxy(function() { // wait for mousedown refocusing
+                    if (!this._hasFocus) this._blur();
+                }, this), 1);
+            }
         }, this));
         
-        if (!preCreatedInput) this.bind('mousedown', function(e) {
-            setTimeout(uki.proxy(function() {
-                try { this.focus(); } catch (e) {};
-            }, this), 1);
+        if (!preCreatedFocusTarget) this.bind('mousedown', function(e) {
+            if (this._focusOnClick) this.focus();
         });
-    },
+        this._updateFocusable();
+    }
     
-    _focus: function(e) {
+    this._focus = function(e) {
         this._hasFocus = true;
         this._firstFocus = false;
-    },
+    }
     
-    _blur: function(e) {
+    this._blur = function(e) {
         this._hasFocus = false;
-    },
+    }
     
-    focus: function() {
-        try {
-            if (this._focusable && !this._disabled) this._focusTarget.focus();
-        } catch(e) {}
+    this.focus = function() {
+        if (this._focusable && !this._disabled) {
+            if (!this._hasFocus) this._focus();
+            var target = this._focusTarget;
+            setTimeout(function() {
+                try {
+                    target.focus();
+                } catch(e) { }
+                target = null;
+            }, 1);
+        }
         return this;
     },
     
-    blur: function() {
+    this.blur = function() {
         try {
             this._focusTarget.blur();
         } catch(e) {}
         return this;
-    },
+    }
     
-    hasFocus: function() {
+    this.hasFocus = function() {
         return this._hasFocus;
-    },
+    }
     
-    _bindToDom: function(name) {
+    this._bindToDom = function(name) {
         if (!this._focusTarget || 'keyup keydown keypress focus blur'.indexOf(name) == -1) return false;
-        
-        return uki.view.Observable._bindToDom.call(this, name, this._focusableInput);
+
+        return uki.view.Observable._bindToDom.call(this, name, this._focusTarget);
     }
     
 

data/frameworks/uki/src/uki-core/view/observable.js

@@ -9,6 +9,7 @@ uki.view.Observable = /** @lends uki.view.Observable.prototype */ {
     // },
     
     bind: function(name, callback) {
+        callback.huid = callback.huid || uki.guid++;
         uki.each(name.split(' '), function(i, name) {
             if (!this._bound(name)) this._bindToDom(name);
             this._observersFor(name).push(callback);
@@ -18,8 +19,8 @@ uki.view.Observable = /** @lends uki.view.Observable.prototype */ {
     
     unbind: function(name, callback) {
         uki.each(name.split(' '), function(i, name) {
-            this._observers[name] = uki.grep(this._observers[name], function(observer) {
-                return observer != callback;
+            this._observers[name] = !callback ? [] : uki.grep(this._observersFor(name, true), function(observer) {
+                return observer != callback && observer.huid != callback.huid;
             });
             if (this._observers[name].length == 0) {
                 this._unbindFromDom(name);