title: How do I reverse order KnockoutJS array items so they are added to the top of the screen in descending order
body: <p>Need to add new items to an observable array but have them added to the top of the list, not the bottom as in this example. Any ideas please? Have tried .reverse() but obviously there's an issue with the array being dynamically created and displayed...</p>
  
  <p><a href="http://jsfiddle.net/CSFuF/1/" rel="nofollow">http://jsfiddle.net/CSFuF/1/</a> with .reverse() not working</p>
  
  <p><a href="http://jsfiddle.net/CSFuF/" rel="nofollow">http://jsfiddle.net/CSFuF/</a> without .reverse()</p>
  
  <pre><code>&lt;!-- End view/edit employees details --&gt;
  &lt;ul data-bind="foreach: parents.reverse()"&gt;
       &lt;h3 data-bind="visible: $index() == 0"&gt;Parents&lt;/h3&gt;
  
      &lt;!-- add / remove parent --&gt;
      &lt;li&gt;          
          &lt;fieldset&gt;
              &lt;h4 data-bind="text: $index()"&gt;&lt;/h4&gt;
                &lt;p style="float: left"&gt;
                  &lt;button data-bind='disable: !(children().length &gt; 0), click: toggleChildren'&gt;&lt;span data-bind="visible: toggle"&gt;-&lt;/span&gt;&lt;span data-bind="visible: !toggle()"&gt;+&lt;/span&gt;
                  &lt;/button&gt;
                  &lt;button data-bind='disable: !toggle(), click: addChild'&gt;Add child (+)&lt;/button&gt;
              &lt;/p&gt;
              &lt;!-- add remove child --&gt;
              &lt;!-- ko if: toggle --&gt;
              &lt;ul class="qtr" data-bind="foreach: children.reverse()"&gt;
                   &lt;h4 data-bind="visible: $index() == 0"&gt;Children&lt;/h4&gt;
  
                  &lt;li&gt;
                      &lt;fieldset&gt;
                          &lt;h4 data-bind="text: $index()"&gt;&lt;/h4&gt;
                          &lt;button data-bind='click: removeChild'&gt;Remove child (-)&lt;/button&gt;
                      &lt;/fieldset&gt;
                  &lt;/li&gt;
              &lt;/ul&gt;
              &lt;!-- /ko --&gt;
              &lt;p style="float: right"&gt;
                  &lt;button data-bind='click: removeParent'&gt;Remove parent (-)&lt;/button&gt;
              &lt;/p&gt;
  
          &lt;/fieldset&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;p style="float: right"&gt;
      &lt;button data-bind='click: addParent'&gt;Add parent (+)&lt;/button&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>function Parent(children) {
      var self = this;
      //self.name = ko.observable(name);
      self.toggle = ko.observable(true);
      self.children = ko.observableArray(children);
      self.addChild = function () {
          self.children.push(new Child("", self));
      }
      self.removeParent = function (parent) {
          vm.removeParent(self);
      };
      self.removeChild = function (child) {
          self.children.remove(child);
      }
      self.toggleChildren = function () {
          self.toggle(!self.toggle());
      };
  }
  
  function Child(name, parent) {
      var self = this;
      self.parent = parent;
      self.removeChild = function () {
          self.parent.removeChild(self);
      };
  }
  
  function ParentChildViewModel() {
      var self = this;
      self.parents = ko.observableArray([]);
      self.addParent = function () {
          self.parents.push(new Parent());
      };
      self.removeParent = function (parent) {
          self.parents.remove(parent);
      }
  };
  
  var vm = new ParentChildViewModel();
  ko.applyBindings(vm);
  </code></pre>