title: Why does my ko computed observable not update bound UI elements when its value changes?
body: <p>I'm trying to wrap a cookie in a computed observable (which I'll later turn into a protectedObservable) and I'm having some problems with the computed observable.  I was under the opinion that changes to the computed observable would be broadcast to any UI elements that have been bound to it.</p>
  
  <p>I've created <a href="http://jsfiddle.net/allen/2JWBf/13/">the following fiddle</a></p>
  
  <p><strong>JavaScript</strong>:</p>
  
  <pre><code>var viewModel = {};
  
  // simulating a cookie store, this part isnt as important
  var cookie = function () {  
  
      // simulating a value stored in cookies
      var privateZipcode = "12345";
  
      return {
          'write' : function (val) { privateZipcode = val; }, 
          'read': function () { return privateZipcode; }
      }
  }();
  
  viewModel.zipcode = ko.computed({
          read: function () {
              return cookie.read();
          },
          write: function (value) {
              cookie.write(value);
          },
          owner: viewModel
      });
  
  ko.applyBindings(viewModel);?
  </code></pre>
  
  <p><strong>HTML</strong>:</p>
  
  <pre><code>zipcode:
  &lt;input type='text' data-bind="value: zipcode"&gt; &lt;br /&gt;
  
  zipcode: 
  &lt;span data-bind="text: zipcode"&gt;&lt;/span&gt;?
  </code></pre>
  
  <p>I'm not using an observable to store <code>privateZipcode</code> since that's really just going to be in a cookie.  I'm hoping that the <code>ko.computed</code> will provide the notifications and binding functionality that I need, though most of the <a href="http://knockoutjs.com/documentation/computedObservables.html">examples I've seen</a> with <code>ko.computed</code> end up using a <code>ko.observable</code> underneath the covers.</p>
  
  <p>Shouldn't the act of writing the value to my computed observable signal the UI elements that are bound to its value?  Shouldn't these just update?</p>
  
  <h2>Workaround</h2>
  
  <p>I've got a simple workaround where I just use a <code>ko.observable</code> along side of my cookie store and using that will trigger the required updates to my DOM elements but this seems completely unnecessary, unless <code>ko.computed</code> lacks the signaling / dependency type functionality that <code>ko.observable</code> has.</p>
  
  <p><a href="http://jsfiddle.net/allen/jh4qN/3/">My workaround fiddle</a>, you'll notice that the only thing that changes is that I added a <code>seperateObservable</code> that isn't used as a store, its only purpose is to signal to the UI that the underlying data has changed.</p>
  
  <pre><code>// simulating a cookie store, this part isnt as important
  var cookie = function () {  
  
      // simulating a value stored in cookies
      var privateZipcode = "12345";
  
      // extra observable that isnt really used as a store, just to trigger updates to the UI
      var seperateObservable = ko.observable(privateZipcode);
  
      return {
          'write' : function (val) { 
              privateZipcode = val; 
              seperateObservable(val);
          }, 
          'read': function () { 
              seperateObservable();
              return privateZipcode; 
          }
      }
  }();
  </code></pre>
  
  <p>This makes sense and works as I'd expect because <code>viewModel.zipcode</code> depends on <code>seperateObservable</code> and updates to that should (and does) signal the UI to update.  <strong>What I don't understand,</strong> is why doesn't a call to the <code>write</code> function on my <code>ko.computed</code> signal the UI to update, since that element is bound to that <code>ko.computed</code>?</p>
  
  <p>I suspected that I might have to use something in knockout to manually signal that my <code>ko.computed</code> has been updated, and I'm fine with that, that makes sense.  I just haven't been able to find a way to accomplish that.</p>