Daten von knockout viewModel wird nicht angezeigt

Question

Ich fange gerade mit Knockout an, und ich habe einige Suche hier und versuchte ein paar Lösungen, aber war nicht in der Lage, eine zu finden, die funktionierte. Ich versuche, eine Liste von Komponenteninstanzen anzuzeigen (die zufällig Verzeichnisse genannt werden - aber nicht wie Ordner, sondern ein Verzeichnis von Kontakten).

Wie auch immer, ein einzelnes Verzeichnis kann eine beliebige Anzahl von Unterverzeichnissen haben (so wird eventuell eine Rekursion benötigt). Ich muss dem Benutzer nur die Verzeichnishierarchie anzeigen und sie dann aktualisieren, wenn sie eine neue hinzufügen. Klingt einfach genug.

Allerdings kann ich die Daten nicht in der Ansicht als eine Liste verschachtelter Listen anzeigen. Für jetzt bin ich bereit, auf die Verschachtelung zu verzichten und nur die oberste Liste zu bekommen. Ich bin in der Lage, die Daten vom Server ordnungsgemäß zurückzugeben und in das ViewModel zu übergeben. Ich kann console.log die Daten und es ist in Ordnung.

Hier ist ein Link zu einer Geige mit den relevanten Informationen (minus die Unterverzeichnisse in der Struktur, aber sie würden nur unter einem Schlüssel der Unterverzeichnisse mit den gleichen Daten wie die oberste Ebene, nur unterschiedliche Werte).

Ansichtsmodell:

var directories; 

function DirectoryListViewModel(data) { 
    var directoryMapping = { 
    "name": { 
     "create": function(options) { 
     return ko.observable(options.data); 
     } 
    } 
    }; 

    for (var i = 0; i < 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)); 

Markup:

<div class="nestable-white dd" id="directories"> 
    <ol class="dd-list"> 
    <li class="dd-item"> 
     <div class="dd-handle" data-bind="text: name"></div> 
    </li> 
    </ol> 
</div> 

https://jsfiddle.net/HunterJoe/dzfv5zn0/1/

Answer 1

Added Array:

function DirectoryListViewModel(data) { 
    var self = this; 

    self.directories = ko.observableArray(); 

    if (data != null) 
     ko.mapping.fromJS(data, directoryMapping, self); 
} 

Aktualisiert Objekt:

directories = new DirectoryListViewModel({directories : directoryData }); 

HTML:

<ol class="dd-list" data-bind="foreach: directories"> 
    <li class="dd-item"> 
     <div class="dd-handle" data-bind="text: name"></div> 
    </li> 
    </ol> 

Sie Unterordner gesprochen - html wie dieses mein Update Siehe

<ol class="dd-list" data-bind="foreach: directories"> 
    <li class="dd-item"> 
     <div class="dd-handle" data-bind="text: name"></div> 
     <ol class="dd-list" data-bind="foreach: subdirectories"> 
      <li class="dd-item"> 
       <div class="dd-handle" data-bind="text: name"></div> 
      </li> 
     </ol> 
    </li> 
    </ol> 

aussehen könnte:

https://jsfiddle.net/dzfv5zn0/2/

function DirectoryListViewModel(data) { 
    var self = this; 

    self.directories = ko.observableArray(); 

    if (data != null) 
     ko.mapping.fromJS(data, { directories: directoryMapping }, self); 
} 

function DirectoryModel(data) { 
    var self = this; 

    self.name = ko.observable(''); 
    self.subDirectories = ko.observableArray(); 

    if (data != null) 
     ko.mapping.fromJS(data, { subDirectories : directoryMapping }, self); 
} 

var directoryMapping = { 
    create: function (options) { 
     return new DirectoryModel(options.data); 
    } 
}