Add support for binding to specific pseudo-properties (e.g. html, val…

…ue, visible, checked) with intelligent defaults.

examples.html

@@ -34,7 +34,7 @@ <h3>Simple Bindings</h3>
 
       <div class="html code">
         Name: &lt;span bind="simple.name"&gt;&lt;/span&gt;
-      </pre>
+      </div>
 
       <script type="text/javascript" charset="utf-8">
         var simple = $.kvo.build({name: "Frank"});
@@ -44,5 +44,47 @@ <h3>Simple Bindings</h3>
         });
       </script>
     </div>
+
+    <div id="visibility" class="example">
+      <h3>Binding Visibility</h3>
+
+      <p>
+        This example shows how to show/hide something using key-value binding.
+      </p>
+
+      <p>
+        This is only visible:
+      </p>
+
+      <!-- <example> -->
+      <div style="font-size:1.4em; color:red" bind="visi.visible" bind-to="visible">
+        HELLO
+      </div>
+      <!-- </example> -->
+
+      <p>
+        When this is checked:
+      </p>
+
+      <label>
+        <input type="checkbox" id="visi-checkbox" bind="visi.visible" /> Visible?
+      </label>
+
+      <div class="html code">
+        &lt;div bind="visi.visible" bind-to="visible"&gt;<br/>
+        &nbsp;&nbsp;HELLO<br/>
+        &lt;/div&gt;
+      </div>
+
+      <script type="text/javascript" charset="utf-8">
+        var visi = $.kvo.build({visible: true});
+
+        $('#visi-checkbox').bind('click', function() {
+          visi.visible = $(this).attr('checked');
+        });
+      </script>
+
+      <div class="html"></div>
+    </div>
   </body>
 </html>

lib/examples.css

@@ -3,6 +3,7 @@
   width: 450px;
   float: left;
   padding: 0 10px 0 10px;
+  margin-right: 15px;
 }
 
 div.code {

lib/jquery-kvo.js

@@ -31,36 +31,50 @@
     }
   };
 
-  $.fn.kvobind = function(observable, valuepath) {
-    if (typeof observable == 'string' || valuepath === undefined) {
+  $.fn.kvobind = function(observable, valuepath, options) {
+    if (typeof observable == 'string') {
+      options = valuepath;
       var kvo = $.kvo.find(observable);
       observable = kvo.observable;
       valuepath  = kvo.valuepath;
     }
 
+    options = options || {};
     $(observable).kvobservable(true);
     var self = this;
 
     valuepath = $.makeArray(valuepath);
     $(observable).bind('kvo-'+valuepath[0]+'-set', function(event, newvalue, oldvalue) {
-      $.kvo.change(self, newvalue, oldvalue, valuepath);
+      $.kvo.change(self, newvalue, oldvalue, valuepath, options.property);
     });
 
-    $.kvo.change(this, $.kvo.getValue(valuepath, observable), null, valuepath);
+    $.kvo.change(this, $.kvo.getValue(valuepath, observable), null, valuepath, options.property);
   };
 
   $.kvo = {
-    change: function(elements, newvalue, oldvalue, valuepath) {
+    setters: {
+      html: function(e,v){ e.html(v.toString()) }, 
+      value: function(e,v){ e.val(v) }, 
+      checked: function(e,v){ e.val(v ? '1' : '0').attr('checked', v) }, 
+      visible: function(e,v){ v ? e.show() : e.hide() }
+    }, 
+
+    setterFor: function(element, property) {
+      if (property) return property
+      if (element.is(':text')) return 'value';
+      if (element.is(':checkbox')) return 'checked';
+      if (element.is(':radio')) return 'checked';
+      return 'html'
+    }, 
+
+    set: function(element, property, value) {
+      $.kvo.setters[$.kvo.setterFor(element, property)].call($.kvo, element, value);
+    }, 
+
+    change: function(elements, newvalue, oldvalue, valuepath, property) {
       var value = $.kvo.getValue(valuepath.slice(1), newvalue);
       $(elements).each(function() {
-        var element = $(this);
-        if (element.is(':text')) {
-          element.val(value);
-        } else if (element.is(':checkbox') || element.is(':radio')) {
-          element.val(value ? '1' : '0').attr('checked', value);
-        } else {
-          element.html(value);
-        }
+        $.kvo.set($(this), property, value);
       });
     }, 
 
@@ -125,7 +139,7 @@
 
     main: function(scope) {
       $('[bind]', scope).each(function() {
-        $(this).kvobind($(this).attr('bind'));
+        $(this).kvobind($(this).attr('bind'), {property: $(this).attr('bind-to')});
       });
     }
   };