Knockout-Bindungen aus JSON-Dateiproblemen

Question

Ich verwende Typoskript, um mein Knockout ViewModel zu definieren.

Ich habe eine JSON-Datei, deren Struktur man sehen kann here (Github gist as Es ist ein bisschen groß hier einzufügen).

Die Struktur ist im Grunde:

Orderline (die Wurzel) -> Meilensteine ​​-> factory_date

oder oral: (viele), um Linien haben (viele) Meilensteine, die jeweils (eine) Fabrik Datum .

Ich versuche, ein Ansichtsmodell mit den folgenden zu bauen:

var FactoryAppViewModel = (function() { 
function FactoryAppViewModel(seasonID) { 
    var self = this; 
    self.seasonID = seasonID; 
    self.orderlines = ko.observableArray([]); 
    this.buildViewModel(); 
} 

FactoryAppViewModel.prototype.buildViewModel = function() { 
    var self = this; 
    var getOrderLines = HTTP.get("/season/" + self.seasonID + "/orderlines").done(function (data) { 
     self.orderlines(JSON.parse(data)); 
    }).fail(function() { 
     error("Could not get orderlines"); 
    }); 
}; 

Soweit ich weiß, die JSON.parse auf die hier Daten werden die Werte in die Auftragszeilen ko.observableArray([]) gelten, aber ich brauche eine ko anwenden .observable zu den Auftrag Zeilen Kinder (Meilensteine), und zu einem Meilensteine ​​Kind (Fabrik_Datum) sowie. Und ich weiß nicht, wie ich das machen soll. Am allerwenigsten von JSON. Ich habe this gelesen, aber es schien mir nicht zu helfen.

Ich weiß, dass die Observable nicht angewendet wird, denn wenn ich eine factory_date in der Ansicht ändern, wird das Viewmodel nicht aktualisiert.

Jede Hilfe wäre willkommen. Das obige Javascript ist das kompilierte TypeScript.

EDIT:

Hier ist ein Beispiel für die Art, wie ich den Code in der Ansicht bin Zugriff:

<tbody data-bind="foreach: orderlines"> 
     <tr> 
      <td data-bind="text: factory.name"></td> 
      <!-- ko foreach: milestones --> 
       <!-- ko if: factory_date == null --> 
        <td> 
         <span>TBA</span> 
        </td> 
       <!-- /ko --> 
       <!-- ko if: factory_date !== null --> 
        <td> 
         <div class="wrapper-wrapper"> 
          <div class="btn btn-primary dateChanger"> 
           <span data-bind="text: moment(factory_date.milestone_date).format('DD-MM-YYYY')"></span> 
          </div> 
          <div class="date-update-wrapper text-center"> 
           <input type="text" data-bind="attr: {value: moment(factory_date.milestone_date).format('DD-MM-YYYY')}" class="form-control datetimepicker"> 
           <a class="save-date btn btn-success" data-bind="click: function(){$root.saveDate(factory_date, $parent)}"><i class="fa fa-check"></i></a> 
           <a class="cancel-date btn btn-danger"><i class="fa fa-times"></i></a> 
          </div> 
         </div> 
        </td> 
       <!-- /ko --> 
      <!-- /ko --> 
     </tr> 
    </tbody> 

Der Teil, der mich darauf aufmerksam gemacht, ich hatte ein Problem war dieser Teil:

Ich machte eine einfache saveDate-Methode, die console.log(factory_date.milestone_date) war, und es gab die Standard-JSON-Daten zurück, trotz meiner Bearbeitung in der Ansicht (mit dem Datepicker).

Answer 1

Knockout bildet standardmäßig keine Kinder in Listen mit Observablen ab. Es gibt ein Plugin namens ko.mapping, das Ihnen helfen kann, das zu erreichen, wonach Sie suchen.

Sie können einen "Kinder" Mapping oder Schleife durch Ihre Kinder einrichten, manuell beobachtbar zu machen (in diesem Fall von JavaScript):

var mappedChildren = []; 
 
var children = someObj.children(); 
 
for (var i = 0; i < children.length; i++) { 
 
    var mappedChild = ko.mapping.fromJS(children[i], mappingFunction); 
 
    mappedChildren.push(mappedChild); 
 
} 
 
someObj.children(mappedChildren);