title: Knockout - Using foreach and sort together
body: <p>I am having trouble combining the foreach binding with a sort.  I have a list bound like so:</p>
  
  <pre><code>&lt;article data-bind="foreach: widgets"&gt;  
  </code></pre>
  
  <p>Widgets is a simple obvservable array:</p>
  
  <pre><code>var widgets= ko.observableArray();
  </code></pre>
  
  <p>This works nicely giving me a list of my "widgets".  If I add a new "widget" to this list then it appears dynamically in the list via data binding.</p>
  
  <p>However as soon as I add sorting to the array:</p>
  
  <pre><code>&lt;article data-bind="foreach: widgets.sort(function (left, right) { return left.order() == right.order() ? 0 : (left.order() &lt; right.order() ? -1 : 1); })"&gt;
  </code></pre>
  
  <p>Then newly added widgets no longer appear in my list - unless I reload the page.  (The sorting works nicely at this point - if I update the "order" field that I am sorting on then the items in my list are dynamically re-sorted).</p>
  
  <p>How can I go about getting the sorting to play nicely with the dynamic updating of new items in my observable array?</p>
  
  <p>I am using Breezejs in order to retrieve my data, however I do not think that is impacting on this scenario.</p>