title: Change Deep Options in a jQuery UI Widget
body: <p>What is the best way to change a deeply nested option in a jQuery widget after it has been created?</p>
  
  <pre><code>$.widget("test.widget1", {
      options: {
          deepOption: {
              prop1: false,
              prop2: false
          }
      },
      _create: function() {
  
      },
      _init: function () {
          this.element.append('&lt;br&gt;' + this.options.deepOption.prop1 + " " + this.options.deepOption.prop2);
      }
  })
  $("#one").widget1();
  
  $("#one").widget1({
      deepOption: {
          prop1: true
      }
  });​
  </code></pre>
  
  <p>The above code changes the <code>prop1</code> option to true and nukes <code>prop2</code>.  How can I change <code>prop1</code> while preserving <code>prop2</code>.</p>
  
  <p><a href="http://jsfiddle.net/hWKxH/" rel="nofollow">Here is a jsFiddle for this.</a></p>
  
  <p><strong>Edit:</strong>  I came up with a solution but it seems like kind of a hack.  Is this the best way to do what I am trying to do?</p>
  
  <pre><code>$.widget("test.widget1", {
      options: {
          deepOption: {
              prop1: false,
              prop2: false
          }
      },
      _create: function() {
  
      },
      _init: function () {
          this.element.append('&lt;br&gt;' + this.options.deepOption.prop1 + " " + this.options.deepOption.prop2);
      },
      _setOption: function (key, value) {
          switch(key) {
              case 'deepOption':
                  value = $.extend({}, this.options.deepOption, value);                
                  break;            
          }
  
          $.Widget.prototype._setOption.apply(this, arguments);
      }
  })
  $("#one").widget1();
  
  $("#one").widget1({
      deepOption: {
          prop1: true
      }
  });​
  </code></pre>
  
  <p><a href="http://jsfiddle.net/MB3Mj/" rel="nofollow">Here is the updated jsFiddle.</a></p>