Oraclejet-Ojtimeline-Komponente an ViewModel binden

Question

Ich versuche zu verstehen, wie ich Daten aus dem Ansichtsmodell an die Ansicht binden kann. Die REST Anforderung an das Back-End funktioniert gut und ich bekomme ein JSON-Array mit mehreren Elementen. Die vorhandene documentation gibt mir nicht genug Hilfe.

Wie kann ich die Timeline-Komponente ojtimeline an das View-Model Data Array binden?

Bearbeiten: Keine Fehler jetzt, da die Ansicht das View-Model-Array erkennt. Aber die ojtimeline zeigt nicht die Daten, nur eine funktionierende leere Ansichtskomponente.

Ansicht

<div id="tline" 
    data-bind='ojComponent: { 
     component: "ojTimeline", 
     minorAxis: { 
      scale: "hours", 
      zoomOrder: ["hours", "days", "weeks"] 
     }, 
     majorAxis: { 
     scale: "weeks" 
     }, 
     start: new Date("Jan 1, 2016").toISOString(), 
     end: new Date("Jun 31, 2016").toISOString(), 
    referenceObjects: [{value: new Date("Feb 1, 2010").toISOString()}], 
    series: [{ 
     id: "id", 
     emptyText: "No Data.", 
     items: statusArray, 
     label: "Oracle Events" 
    }], 
    overview: { 
    rendered: "off" 
    }           
}' style="width: '100%';height: 350px"></div> 

View-Modell

Answer 1

Die Reference verursacht wird, durch

var statusArray = ko.observableArray([]);

sollte es sein

this.statusArray = ko.observableArray([])

Sie müssen (wahrscheinlich) auch die Zeitleiste aktualisieren, wenn sich das beobachtbare Array geändert hat, z. nach der for-Schleife in Erfolg Rückruf:

... 
success: function (data, textStatus, jqXHR) { 
         var x = data; 
         for (i = 0; i < x.length; i++) { 
          self.statusArray.push({ 
           id: data[i].id, 
           description: data[i].text, 
           title: data[i].user.screenName, 
           start: data[i].createdAt}); 
         } 
        $("#tline").ojTimeline("refresh"); 
        } 
... 

Answer 2

Ich habe ojTimeline von Ajax Daten geladen und hat nie verwenden Auffrischen erforderlich. Im schlimmsten Fall können Sie die ojTimeline in eine <!-- ko if ... --> verpacken, so dass die Zeitleiste erst erscheint, wenn Sie eine Ajax-Antwort haben.

Für das ojTimelineitems Attribut, anstatt das Observable Referenzieren, musste ich das Observable wie folgt auspacken: items: ko.toJS(statusArray).

Eine andere Sache in Betracht zu ziehen ist in eine ko.observableArray innerhalb einer for Schleife schieben. Jeder Push, der die Methode push() verwendet, ruft Subskriptionen auf. Wenn Ihr Array an die Benutzeroberfläche gebunden ist, löst jeder Push eine DOM-Änderung aus. Stattdessen ist es oft besser, in das zugrunde liegende Array zu pushen (das Array auszupacken) und dann self.statusArray.valueHasMutated aufzurufen. Sie können auch Ihre Verwendung von this, self und nichts im Auge behalten. Konsistenz hilft, Bugs wie den identifizierten Ladar zu vermeiden.

Was denken Sie über das Umschreiben Ihrer for-Schleife (Code nicht getestet)?

ko.utils.arrayPushAll(
    self.statusArray(), 
    ko.utils.arrayMap(data, function(item) { 
    return { 
     id: item.id, 
     description: item.text, 
     title: item.user.screenName, 
     start: item.createdAt; 
    }; 
    }); 
); 

self.statusArray.valueHasMutated(); 

Oder, wenn Sie mit ihm weg erhalten können (einige OJ Komponenten Ist dieser Ansatz nicht), können Sie die Push überspringen und ersetzen Sie einfach das gesamte Array innerhalb des beobachtbaren:

self.statusArray(
    ko.utils.arrayMap(data, function(item) { 
    return { 
     id: item.id, 
     description: item.text, 
     title: item.user.screenName, 
     start: item.createdAt; 
    }; 
    }); 
);