title: Data from knockout viewModel is not displaying
body: <p>I am just getting started with Knockout, and I did some searching here and tried a few solutions, but was not able to find one that worked. I am trying to display a list of component instances (which happen to be called Directories - but not like folders, its a directory of contacts).</p>
  
  <p>Anyway, a single directory can have any number of sub-directories (so eventually recursion will be needed). I just need to display the directory hierarchy to the user, and then update it if they add a new one. Sounds simple enough.</p>
  
  <p>However I am not able to get the data to display in the view as an ol of nested lists. For now I am willing to forgo the nesting and just get the top level list. I am able to return the data from the server properly, and pass it into the ViewModel. I can console.log the data and its fine.</p>
  
  <p>Here is a link to a fiddle with the relevant info (minus the sub directories in the structure, but they would just be under a key of subDirectories with the same data as the top level, only different values).</p>
  
  <p>ViewModel:</p>
  
  <pre><code>var directories;
  
  function DirectoryListViewModel(data) {
    var directoryMapping = {
      "name": {
        "create": function(options) {
          return ko.observable(options.data);
        }
      }
    };
  
    for (var i = 0; i &lt; data.length; i++) {
      console.log(data[i].name);
    }
  
    ko.mapping.fromJS(data, directoryMapping, this);
  }
  // I hard coded the actual data coming back from ther server, as the server call from here will not work.
  
  /*fetch('#URL#', {method: "POST", credentials: "include"})
  .then(function(allData) {
      return allData.json();
  })
  .then(function(data){
      var parsedData = JSON.parse(data);
      var directoryData = $.map(parsedData, function(item) { return item });
      console.log(directoryData);
      directories = new DirectoryListViewModel(directoryData);
      ko.applyBindings(directories, $('#directories').get(0));
  }); */
  
  var directoryData = [{
    "summary": "",
    "name": "Staff",
    "dspRandom": false,
    "description": "",
    "dspTitle": true,
    "priority": 1,
    "dspLimit": 0,
    "childName": "",
    "dspHome": false,
    "dateLastEdited": "May, 26 2016 14:03:37",
    "id": 2,
    "dsp": true,
    "dateCreated": "March, 01 2016 14:03:54",
    "url": "staff",
    "title": ""
  }];
  // I shortened the directoryData for brevity, but it just would have more entries. See the fiddle for more.
  
  console.log(directoryData);
  directories = new DirectoryListViewModel(directoryData);
  ko.applyBindings(directories, $('#directories').get(0));
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;div class="nestable-white dd" id="directories"&gt;
    &lt;ol class="dd-list"&gt;
      &lt;li class="dd-item"&gt;
        &lt;div class="dd-handle" data-bind="text: name"&gt;&lt;/div&gt;
      &lt;/li&gt;
    &lt;/ol&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><a href="https://jsfiddle.net/HunterJoe/dzfv5zn0/1/" rel="nofollow">https://jsfiddle.net/HunterJoe/dzfv5zn0/1/</a></p>