Bindet an ein Nicht-DOM-UI-Element

Benutzerdefinierte Bindungen werden innerhalb von berechneten Observablen implementiert, so dass Abhängigkeiten verfolgt werden und die Funktionalität update erneut ausgelöst werden kann.

Es klingt, als würden Sie für Ihre Funktionalität erwägen, berechnete Observables zu verwenden, die Ihre Objekte verfolgen, auf Abhängigkeiten zugreifen und alle notwendigen Updates / API-Aufrufe durchführen.

Ich habe bisher noch keinen Stoff verwendet, aber hier wäre ein Take, bei dem Sie ein Ansichtsmodell definieren, um ein Rechteck darzustellen und ein berechnetes Objekt zu erstellen, um das Stoffobjekt kontinuierlich zu aktualisieren, wenn sich Werte ändern.

Noch eine kurze Idee, wenn Sie lieber einige der Fabric / Canvas-Aufrufe aus Ihrem View-Modell heraushalten möchten (würde ich wahrscheinlich). Sie könnten eine fabric -Bindung erstellen, die ein Array von Shapes in die Zeichenfläche aufnimmt. Sie würden auch einen Handler übergeben, der die Params abruft, um an sie zu übergeben. Die Bindung erstellt dann die Form, fügt sie der Zeichenfläche hinzu und erstellt dann eine Berechnung, um die Form bei Änderungen zu aktualisieren. Etwas wie:

Sie könnten es auf einer Leinwand wie:

An diesem Punkt könnte das Ansichtsmodell ziemlich vereinfacht werden, um nur die Daten des Rechtecks ​​darzustellen. Probe hier: Ссылка

Ich habe ein ähnliches Problem in meinem Hobby-Projekt, Ссылка ... Ich muss ein Array von Wegpunkten auf eine Karte und ich binden kann es nicht direkt über KO tun, da die Wegpunkte in OpenLayers SVG-Layern verborgen sind. Also verwende ich eine Subskriptionsfunktion innerhalb dieses Musters:

Zuerst ein Ansichtsmodell für die Dinge, die du anzeigst, für mich Wegpunkte, für deine Elemente; grob -

Zweitens, ein Ansichtsmodell, das eine Liste dieser Dinge enthält:

Dann etwas Logik, um Ihre Elemente von Ihrem Webservice in das Ansichtsmodell zu laden, ungefähr:

Es klingt, als ob Sie dieses Bit sortiert haben; Ziel ist es, eine Liste von Elementen zu erhalten, die in einem ObservableArray enthalten sind. Sie können es dann abonnieren und Fabric arbeiten; Es gibt eine Menge Pseudo-Code in diesem nächsten Bit!

Dies ist zwar nicht besonders ausgefeilt, bedeutet aber, dass sich Ihre Änderungen sofort in Ihrer Zeichenfläche widerspiegeln, wenn sich Ihre Daten ändern und sich die Liste der Elemente ändert, indem KO die Subskriptionsfunktion aufruft. Die "Synchronisation" zwischen der neuen Liste von Elementen und dem, was bereits auf der Leinwand ist, ist ziemlich grob: einfach alles zerstören und die gesamte Liste neu darstellen. Dies ist für mich mit meinen Wegpunkten in Ordnung, könnte aber für Sie zu teuer sein.

Ich war daran interessiert, auf diese Frage zu stoßen, da ich auch versucht habe, die Objekte von fabric.js in das Knockout-Modell zu integrieren - ich bin sicher, dass es keine einzige offensichtliche Antwort gibt. Hier ist ein Beispiel, das meine neuesten Gedanken zeigt: Ссылка Es verfügt über eine bidirektionale Datenbindung zwischen DOM-Objekten (Textfeldern) und dem aktuell ausgewählten Canvas-Objekt.

HTML:

Javascript:

Ein paar Dinge zu beachten:

• Ich erstelle eine ko.observable und mache eine manuelle Subskription, um die Fabric-Objekte zu aktualisieren
• Ich habe einen Fabric-Event-Handler eingerichtet, der die ko.observable für die Objektauswahl / -änderung aktualisiert. Ich musste nicht an etwas anderes als das aktuell ausgewählte Objekt binden.
• Ich musste aufgeschobene Updates verwenden, um zyklische Updates zu vermeiden (Fabric Updates ko, die Fabric dann benachrichtigt ...)

Ich bin sehr neu zu knockout, so dass alle Kommentare / Vorschläge willkommen wären.