Frage Wie funktioniert die Datenbindung in AngularJS?


Wie funktioniert die Datenbindung in der AngularJS Rahmen?

Ich habe keine technischen Details gefunden ihre Website. Es ist mehr oder weniger klar, wie es funktioniert, wenn Daten von Ansicht zu Modell weitergegeben werden. Aber wie verfolgt AngularJS Änderungen von Modelleigenschaften ohne Setter und Getter?

Ich habe das gefunden JavaScript-Beobachter das könnte diese Arbeit machen. Aber sie werden nicht unterstützt Internet Explorer 6 und Internet Explorer 7. Wie also weiß AngularJS, dass ich zum Beispiel Folgendes geändert habe und diese Veränderung auf einen Blick reflektiert habe?

myobject.myproperty="new value";

1803
2018-03-13 10:16


Ursprung


Antworten:


AngularJS merkt sich den Wert und vergleicht ihn mit einem vorherigen Wert. Dies ist eine grundsätzliche Dirty-Prüfung. Wenn sich der Wert ändert, wird das Änderungsereignis ausgelöst.

Das $apply() Methode, die Sie beim Übergang von einer Nicht-AngularJS-Welt in eine AngularJS-Welt aufrufen $digest(). Ein Digest ist einfach nur ein schmutziger Check. Es funktioniert auf allen Browsern und ist völlig vorhersehbar.

So stellen Sie Dirty-Checking (AngularJS) und Change-Listener (KnockoutJS und Backbone.js): Während dirty-checking einfach erscheint und sogar ineffizient ist (ich werde das später ansprechen), stellt es sich heraus, dass es semantisch immer korrekt ist, während Listener viele Ecken und Kanten haben und Dinge wie Abhängigkeits-Tracking benötigen es ist semantisch korrekt. KnockoutJS-Abhängigkeitsverfolgung ist eine clevere Funktion für ein Problem, das AngularJS nicht hat.

Probleme mit Change-Listenern:

  • Die Syntax ist grauenhaft, da Browser sie nicht nativ unterstützen. Ja, es gibt Proxies, aber sie sind nicht in allen Fällen semantisch korrekt, und natürlich gibt es keine Proxies in alten Browsern. Die Quintessenz ist, dass Dirty-Checking erlaubt POJO, während KnockoutJS und Backbone.js Sie zwingen, von ihren Klassen zu erben und auf Ihre Daten über Accessoren zuzugreifen.
  • Ändern Sie die Koaleszenz. Angenommen, Sie haben ein Array von Elementen. Angenommen, Sie möchten Elemente zu einem Array hinzufügen, während Sie Schleifen hinzufügen, jedes Mal, wenn Sie hinzufügen, zünden Sie Ereignisse bei Änderung, wodurch die Benutzeroberfläche gerendert wird. Dies ist sehr schlecht für die Leistung. Was Sie wollen, ist die Benutzeroberfläche nur einmal am Ende zu aktualisieren. Die Änderungsereignisse sind zu feinkörnig.
  • Ändern Sie Listener feuern sofort auf einem Setter, was ein Problem ist, da der Change-Listener weiter Daten ändern kann, die mehr Änderungsereignisse auslöst. Dies ist schlecht, da auf Ihrem Stack mehrere Änderungsereignisse gleichzeitig auftreten können. Angenommen, Sie haben zwei Arrays, die aus irgendeinem Grund synchron gehalten werden müssen. Sie können nur das eine oder das andere hinzufügen, aber jedes Mal, wenn Sie hinzufügen, zünden Sie ein Änderungsereignis, das jetzt eine inkonsistente Sicht der Welt hat. Dies ist ein sehr ähnliches Problem mit Thread-Sperren, das JavaScript vermeidet, da jeder Callback ausschließlich ausgeführt und abgeschlossen wird. Änderungsereignisse brechen dies, da Setter weitreichende Konsequenzen haben können, die nicht beabsichtigt und nicht offensichtlich sind, wodurch das Thread-Problem erneut entsteht. Es stellt sich heraus, dass Sie die Ausführung des Listeners verzögern und sicherstellen wollen, dass nur ein Listener gleichzeitig ausgeführt wird. Daher ist jeder Code frei, um Daten zu ändern, und er weiß, dass währenddessen kein anderer Code ausgeführt wird .

Was ist mit Leistung?

Es mag also scheinen, dass wir langsam sind, da unsichere Überprüfung ineffizient ist. Hier müssen wir uns reelle Zahlen ansehen, anstatt nur theoretische Argumente zu haben, aber zunächst einige Einschränkungen definieren.

Menschen sind:

  • Langsam - Alles, was schneller als 50 ms ist, ist für den Menschen nicht wahrnehmbar und kann daher als "unmittelbar" betrachtet werden.

  • Begrenzt - Sie können einem Menschen auf einer einzigen Seite nicht mehr als 2000 Informationen anzeigen. Alles andere ist eine sehr schlechte Benutzeroberfläche und Menschen können das sowieso nicht verarbeiten.

Die eigentliche Frage ist also: Wie viele Vergleiche können Sie in 50 ms in einem Browser durchführen? Dies ist eine schwer zu beantwortende Frage, da viele Faktoren ins Spiel kommen, aber hier ist ein Testfall: http://jsperf.com/angularjs-digest/6 was 10.000 Zuschauer schafft. In einem modernen Browser dauert das knapp 6 ms. Auf Internet Explorer 8 es dauert ungefähr 40 ms. Wie Sie sehen, ist dies auch in langsamen Browsern kein Problem. Es gibt einen Vorbehalt: Die Vergleiche müssen einfach sein, um in das Zeitlimit zu passen ... Leider ist es viel zu einfach, einen langsamen Vergleich in AngularJS hinzuzufügen, so dass es einfach ist, langsame Anwendungen zu erstellen, wenn Sie nicht wissen, was Sie tun sind dabei. Aber wir hoffen, eine Antwort zu haben, indem wir ein Instrumentierungsmodul zur Verfügung stellen, das Ihnen die langsamen Vergleiche zeigt.

Es stellt sich heraus, dass Videospiele und GPUs die Dirty-Checking-Methode verwenden, insbesondere weil sie konsistent ist. Solange sie die Bildwiederholfrequenz des Monitors überbrücken (normalerweise 50-60 Hz oder alle 16,6-20 ms), ist jede darüber liegende Leistung eine Verschwendung, so dass es besser ist, mehr zu zeichnen, als FPS zu erhöhen.


2661
2018-03-13 23:47



Misko hat bereits eine hervorragende Beschreibung der Funktionsweise der Datenbindungen gegeben, aber ich möchte meine Sicht auf das Leistungsproblem mit der Datenbindung hinzufügen.

Wie Miko anmerkte, sind etwa 2000 Bindungen, wo man Probleme sieht, aber man sollte sowieso nicht mehr als 2000 Informationen auf einer Seite haben. Das mag stimmen, aber nicht jede Datenbindung ist für den Benutzer sichtbar. Sobald Sie beginnen, eine Art Widget oder Datenraster mit Zwei-Wege-Bindung zu erstellen, können Sie das tun leicht hit 2000 bindings, ohne einen schlechten ux zu haben.

Betrachten Sie zum Beispiel eine Combobox, in der Sie Text eingeben können, um die verfügbaren Optionen zu filtern. Diese Art von Steuerelement könnte ~ 150 Elemente haben und immer noch gut verwendbar sein. Wenn es eine zusätzliche Funktion hat (zum Beispiel eine bestimmte Klasse für die aktuell ausgewählte Option), erhalten Sie 3-5 Bindungen pro Option. Setzen Sie drei dieser Widgets auf eine Seite (z. B. eine zur Auswahl eines Landes, die andere zur Auswahl einer Stadt in diesem Land und die dritte zur Auswahl eines Hotels) und Sie befinden sich bereits zwischen 1000 und 2000 Bindungen.

Oder betrachten Sie ein Datengrid in einer unternehmensweiten Webanwendung. 50 Zeilen pro Seite sind nicht unangemessen, jede davon könnte 10-20 Spalten haben. Wenn Sie dies mit ng-Wiederholungen erstellen und / oder Informationen in einigen Zellen haben, die einige Bindungen verwenden, könnten Sie 2000 Bindungen mit diesem Gitter allein erreichen.

Ich finde das ein enorm Problem bei der Arbeit mit AngularJS, und die einzige Lösung, die ich bisher finden konnte, ist Widgets ohne bidirektionale Bindung zu konstruieren, stattdessen ngOnce, denegistrieren Beobachter und ähnliche Tricks, oder konstruieren Anweisungen, die das DOM mit jQuery und DOM-Manipulation. Ich fühle, dass dies den Zweck der Verwendung von Angular in erster Linie zunichte macht.

Ich würde gerne Vorschläge zu anderen Möglichkeiten hören, damit umzugehen, aber dann sollte ich vielleicht meine eigene Frage schreiben. Ich wollte das in einen Kommentar schreiben, aber es war viel zu lange dafür ...

TL; DR 
Die Datenbindung kann Leistungsprobleme auf komplexen Seiten verursachen.


308
2017-08-22 13:28



Durch dreckiges Überprüfen der $scope Objekt

Angular behält ein einfaches bei array von Beobachtern in der $scope Objekte. Wenn Sie irgendwelche überprüfen $scope Sie werden feststellen, dass es ein enthält array namens $$watchers.

Jeder Beobachter ist ein object das enthält unter anderem

  1. Ein Ausdruck, den der Beobachter überwacht. Dies könnte nur ein sein attribute Name oder etwas komplizierter.
  2. Ein letzter bekannter Wert des Ausdrucks. Dies kann mit dem aktuell berechneten Wert des Ausdrucks verglichen werden. Wenn sich die Werte unterscheiden, löst der Beobachter die Funktion aus und markiert die Funktion $scope wie schmutzig.
  3. Eine Funktion, die ausgeführt wird, wenn der Beobachter verschmutzt ist.

Wie Beobachter definiert sind

Es gibt viele verschiedene Möglichkeiten, einen Angreifer in AngularJS zu definieren.

  • Sie können explizit $watch ein attribute auf $scope.

    $scope.$watch('person.username', validateUnique);
    
  • Sie können ein {{}} Interpolation in Ihrer Vorlage (ein Watcher wird für Sie auf dem aktuellen erstellt $scope).

    <p>username: {{person.username}}</p>
    
  • Sie können eine Direktive wie ng-model um den Beobachter für dich zu definieren.

    <input ng-model="person.username" />
    

Das $digest cycle überprüft alle Beobachter auf ihren letzten Wert

Wenn wir mit AngularJS über die normalen Kanäle (ng-Modell, ng-repeat usw.) interagieren, wird durch die Direktive ein Digest-Zyklus ausgelöst.

Ein Digest-Zyklus ist ein Tiefenquerung von $scope und all seine Kinder. Für jede $scope  object, wir iterieren über seine $$watchers  array und bewerte alle Ausdrücke. Wenn sich der neue Ausdruckswert vom letzten bekannten Wert unterscheidet, wird die Watcher-Funktion aufgerufen. Diese Funktion könnte einen Teil des DOM neu kompilieren, einen Wert neu berechnen $scope, triggert ein AJAX  request, alles, was Sie tun müssen.

Jeder Bereich wird durchlaufen und jeder Watch-Ausdruck wird ausgewertet und mit dem letzten Wert verglichen.

Wenn ein Beobachter ausgelöst wird, $scope ist dreckig

Wenn ein Beobachter ausgelöst wird, weiß die App, dass sich etwas geändert hat $scope ist als schmutzig markiert.

Watcher-Funktionen können andere Attribute ändern $scope oder auf einem Elternteil $scope. Wenn man $watcher Funktion wurde ausgelöst, wir können nicht garantieren, dass unsere anderen $scopes sind immer noch sauber und so führen wir den gesamten Digest-Zyklus erneut aus.

Dies liegt daran, dass AngularJS eine Zwei-Wege-Bindung hat, so dass Daten in der $scopeBaum. Wir können einen Wert auf einen höheren Wert ändern $scope das wurde bereits verdaut. Vielleicht ändern wir einen Wert auf der $rootScope.

Wenn die $digest ist dreckig, wir führen das ganze aus $digest wiederhole den Zyklus

Wir durchlaufen ständig die $digest Zyklus, bis entweder der Verdauzyklus sauber ist (alle $watch Ausdrücke haben den gleichen Wert wie im vorherigen Zyklus) oder wir erreichen das Digest Limit. Standardmäßig ist dieses Limit auf 10 festgelegt.

Wenn wir das Digest-Limit erreichen, wird AngularJS einen Fehler in der Konsole auslösen:

10 $digest() iterations reached. Aborting!

Der Digest ist schwer auf der Maschine, aber einfach für den Entwickler

Wie Sie sehen, überprüft AngularJS jedes Mal, wenn sich in einer AngularJS App etwas ändert, jeden einzelnen Beobachter in der $scope Hierarchie zu sehen, wie zu reagieren. Für einen Entwickler ist das eine enorme Produktivitätssteigerung, da Sie jetzt fast keinen Verdrahtungscode schreiben müssen, AngularJS wird nur bemerken, wenn sich ein Wert geändert hat, und den Rest der App mit der Änderung konsistent machen.

Aus der Perspektive der Maschine ist dies jedoch äußerst ineffizient und wird unsere App verlangsamen, wenn wir zu viele Beobachter erstellen. Misko hat eine Zahl von etwa 4000 Zuschauern angegeben, bevor sich Ihre App in älteren Browsern langsam anfühlt.

Diese Grenze ist leicht zu erreichen, wenn Sie ng-repeat über einen großen JSON  array beispielsweise. Sie können dagegen mit Funktionen wie der einmaligen Bindung zum Kompilieren einer Vorlage, ohne dass Beobachter erstellt werden, abmildern.

Wie man vermeidet, zu viele Beobachter zu schaffen

Jedes Mal, wenn Ihr Nutzer mit Ihrer App interagiert, wird jeder einzelne Betrachter in Ihrer App mindestens einmal bewertet. Ein großer Teil der Optimierung einer AngularJS App ist die Reduzierung der Anzahl der Beobachter in Ihrem $scope Baum. Ein einfacher Weg dies zu tun ist mit einmal verbindlich.

Wenn Sie Daten haben, die sich selten ändern, können Sie sie nur einmal mit der :: -Syntax binden:

<p>{{::person.username}}</p>

oder

<p ng-bind="::person.username"></p>

Die Bindung wird nur ausgelöst, wenn die enthaltende Vorlage gerendert und die Daten in geladen werden $scope.

Dies ist besonders wichtig, wenn Sie eine haben ng-repeat mit vielen Gegenständen.

<div ng-repeat="person in people track by username">
  {{::person.username}}
</div>

142
2018-06-02 12:31



Das ist mein grundlegendes Verständnis. Es kann durchaus falsch sein!

  1. Gegenstände werden beobachtet, indem eine Funktion übergeben wird (das Ding wird zurückgegeben) sah zu) $watch Methode.
  2. Änderungen an beobachteten Elementen müssen innerhalb eines Codeblocks vorgenommen werden eingewickelt von der $apply Methode.
  3. Am Ende von $apply das $digest Methode wird aufgerufen, die geht durch jede der Uhren und Kontrollen, um zu sehen, ob sie sich seitdem geändert haben letztes Mal das $digest lief.
  4. Wenn irgendwelche Änderungen gefunden werden, wird der Digest erneut aufgerufen, bis sich alle Änderungen stabilisiert haben.

In der normalen Entwicklung teilt die Datenbindungssyntax im HTML dem AngularJS-Compiler mit, dass er die Uhren für Sie erstellt und die Controller-Methoden darin ausgeführt werden $apply bereits. Also für den Anwendungsentwickler ist alles transparent.


77
2018-03-13 21:01



Ich habe mich das eine Weile selbst gefragt. Ohne Setter wie AngularJS Hinweis Änderungen an der $scope Objekt? Befragt es sie?

Was es tatsächlich macht, ist folgendes: Irgendein "normaler" Ort, an dem du das Modell änderst, wurde bereits aus dem Bauch heraus aufgerufen AngularJS, so ruft es automatisch an $apply für Sie, nachdem Ihr Code ausgeführt wurde. Angenommen, Ihr Controller verfügt über eine verknüpfte Methode ng-click auf irgendeinem Element. weil AngularJS verbindet den Aufruf dieser Methode für Sie zusammen, es hat eine Chance, ein zu tun $apply an der richtigen Stelle. Für Ausdrücke, die direkt in den Ansichten angezeigt werden, werden diese ebenfalls ausgeführt AngularJS so macht es das $apply.

Wenn in der Dokumentation darüber geredet wird, dass man anrufen muss $apply manuell für Code außerhalb AngularJSEs geht um Code, der, wenn er ausgeführt wird, nicht stammt AngularJS selbst im Call-Stack.


57
2017-09-03 17:45



Erklären mit Bildern:

Data-Binding benötigt ein Mapping

Die Referenz im Bereich ist nicht genau die Referenz in der Vorlage. Wenn Sie zwei Objekte an Daten binden, benötigen Sie eine dritte, die auf die erste hört und die andere ändert.

enter image description here

Hier, wenn Sie das ändern <input>, du berührst die Daten-Ref3. Und der klassische Datenbindungsmechanismus wird sich ändern Daten-Ref4. So wie der andere {{data}} Ausdrücke werden sich bewegen?

Ereignisse führen zu $ ​​digest ()

enter image description here

Angular behält ein oldValue und newValue von jeder Bindung. Und nach jedem Eckiges Ereignis, die Berühmten $digest() loop überprüft die WatchList, um festzustellen, ob sich etwas geändert hat. Diese Eckige Ereignisse sind ng-click, ng-change, $http abgeschlossen $digest() wird so lange wie jede Schleife durchlaufen oldValue unterscheidet sich von der newValue.

Im vorherigen Bild wird bemerkt, dass sich data-ref1 und data-ref2 geändert haben.

Schlussfolgerungen

Es ist ein bisschen wie das Ei und Hühnchen. Man weiß nie, wer anfängt, aber hoffentlich funktioniert es die meiste Zeit wie erwartet.

Der andere Punkt ist, dass Sie leicht die Auswirkungen einer einfachen Bindung auf den Speicher und die CPU verstehen können. Hoffentlich sind Desktops fett genug, um damit umzugehen. Mobiltelefone sind nicht so stark.


29
2018-05-20 13:33



Offensichtlich gibt es keine regelmäßige Überprüfung von Scope ob sich an den daran angehängten Objekten etwas ändert. Nicht alle Objekte, die an den Bereich angehängt sind, werden überwacht. Scope unterstützt prototypisch ein $$ Beobachter . Scope nur durchläuft dies $$watchers wann $digest wird genannt .

Angular fügt den Beobachtern für jede von ihnen einen Beobachter hinzu

  1. {{expression}} - In Ihren Templates (und wo auch immer es einen Ausdruck gibt) oder wenn wir ng-model definieren.
  2. $ scope. $ watch ('expression / function') - In Ihrem JavaScript können wir einfach ein Oszilloskop-Objekt anhängen, um es zu betrachten.

$ Uhr Funktion nimmt drei Parameter auf:

  1. Die erste ist eine Watcher-Funktion, die einfach das Objekt zurückgibt oder wir können einfach einen Ausdruck hinzufügen.

  2. Die zweite ist eine Listener-Funktion, die aufgerufen wird, wenn sich das Objekt ändert. Alle Dinge wie DOM-Änderungen werden in dieser Funktion implementiert.

  3. Der dritte ist ein optionaler Parameter, der einen booleschen Wert annimmt. Wenn seine wahre, eckige Tiefe das Objekt beobachtet und wenn sein falscher Winkel gerade eine Referenz auf das Objekt beobachtet.     Grobe Implementierung von $ watch sieht so aus

Scope.prototype.$watch = function(watchFn, listenerFn) {
   var watcher = {
       watchFn: watchFn,
       listenerFn: listenerFn || function() { },
       last: initWatchVal  // initWatchVal is typically undefined
   };
   this.$$watchers.push(watcher); // pushing the Watcher Object to Watchers  
};

Es gibt eine interessante Sache in Angular namens Digest Cycle. Der $ Digest-Zyklus beginnt als Ergebnis eines Aufrufs von $ scope. $ Digest (). Angenommen, Sie ändern ein $ -Skalenmodell in einer Handlerfunktion durch die ng-click-Anweisung. In diesem Fall löst AngularJS automatisch einen $ digest-Zyklus aus, indem $ digest () aufgerufen wird. Zusätzlich zu ng-click gibt es noch weitere eingebaute Direktiven / Dienste, mit denen Sie Modelle ändern können (zB ng-model, $ timeout, etc) und automatisch einen $ Digest-Zyklus auslösen. Die grobe Implementierung von $ Digest sieht so aus.

Scope.prototype.$digest = function() {
      var dirty;
      do {
          dirty = this.$$digestOnce();
      } while (dirty);
}
Scope.prototype.$$digestOnce = function() {
   var self = this;
   var newValue, oldValue, dirty;
   _.forEach(this.$$watchers, function(watcher) {
          newValue = watcher.watchFn(self);
          oldValue = watcher.last;   // It just remembers the last value for dirty checking
          if (newValue !== oldValue) { //Dirty checking of References 
   // For Deep checking the object , code of Value     
   // based checking of Object should be implemented here
             watcher.last = newValue;
             watcher.listenerFn(newValue,
                  (oldValue === initWatchVal ? newValue : oldValue),
                   self);
          dirty = true;
          }
     });
   return dirty;
 };

Wenn wir JavaScript verwenden setTimeout () Funktion, um ein Oszilloskopmodell zu aktualisieren, Angular hat keine Möglichkeit zu wissen, was Sie ändern könnten. In diesem Fall liegt es in unserer Verantwortung, $ apply () manuell aufzurufen, wodurch ein $ Digest-Zyklus ausgelöst wird. Wenn Sie eine Direktive haben, die einen DOM-Event-Listener einrichtet und einige Modelle innerhalb der Handler-Funktion ändert, müssen Sie $ apply () aufrufen, um sicherzustellen, dass die Änderungen wirksam werden. Die große Idee von $ apply besteht darin, dass wir einen Code ausführen können, der Angular nicht kennt. Dieser Code kann Dinge im Bereich noch ändern. Wenn wir diesen Code in $ apply einbinden, kümmert er sich um den Aufruf von $ digest (). Grobe Implementierung von $ apply ().

Scope.prototype.$apply = function(expr) {
       try {
         return this.$eval(expr); //Evaluating code in the context of Scope
       } finally {
         this.$digest();
       }
};

19
2018-05-22 18:18



AngularJS handhabt den Datenbindungsmechanismus mit Hilfe von drei leistungsstarken Funktionen: $ watch (),$ verdauen ()und $ apply (). Meistens ruft AngularJS $ scope. $ Watch () und $ scope. $ Digest () auf, aber In einigen Fällen müssen Sie diese Funktionen möglicherweise manuell aufrufen, um sie mit neuen Werten zu aktualisieren.

$ watch () : -

Diese Funktion wird verwendet, um Änderungen in einer Variablen im $ scope zu beobachten.   Es akzeptiert drei Parameter: Ausdruck, Listener und Gleichheitsobjekt,   wo Listener und Gleichheitsobjekt optionale Parameter sind.

$ verdauen () -

Diese Funktion durchläuft alle Uhren im $ scope-Objekt,   und seine untergeordneten $ scope-Objekte
     (wenn es welche hat). Wenn $ digest () iteriert   Über den Uhren prüft es, ob der Wert des Ausdrucks hat   geändert. Wenn sich der Wert geändert hat, ruft AngularJS den Listener mit auf   neuer Wert und alter Wert. Die Funktion $ digest () wird aufgerufen   wann immer AngularJS es für notwendig hält. Zum Beispiel nach einer Schaltfläche   Klicken Sie auf oder nach einem AJAX-Anruf. Sie können einige Fälle haben, in denen AngularJS   ruft die Funktion $ digest () nicht für Sie auf. In diesem Fall müssen Sie   ruf es selbst an.

$ apply () -

Angular aktualisiert automatisch nur die Modelländerungen, die dies sind   im AngularJS-Kontext. Wenn Sie in einem Modell außerhalb von ändern   der Angular Kontext (wie Browser DOM Events, SetTimeout, XHR oder Third   Party-Bibliotheken), dann müssen Sie Angular über die Änderungen informieren   Aufruf von $ apply () manuell. Wenn der Funktionsaufruf $ apply () beendet wird   AngularJS ruft $ digest () intern auf, also sind alle Datenbindungen   aktualisiert.


12
2018-05-16 15:05



Es kam vor, dass ich ein Datenmodell einer Person mit einem Formular verknüpfen musste, was ich tat, war eine direkte Abbildung der Daten mit dem Formular.

Zum Beispiel, wenn das Modell so etwas wie

$scope.model.people.name

Die Steuereingabe des Formulars:

<input type="text" name="namePeople" model="model.people.name">

Wenn Sie den Wert des Objekt-Controllers ändern, wird dies automatisch in der Ansicht angezeigt.

Ein Beispiel, bei dem ich das Modell übergeben habe, ist das Aktualisieren von Serverdaten. Wenn Sie nach einer Postleitzahl und Postleitzahl auf der Grundlage von Schrift suchen, laden Sie eine Liste der dieser Ansicht zugeordneten Kolonien und Städte und legen standardmäßig den ersten Wert für den Benutzer fest. Und das habe ich sehr gut gemacht, was passiert, ist das angularJS dauert manchmal ein paar Sekunden, um das Modell zu aktualisieren, um dies zu tun, können Sie einen Spinner während der Anzeige der Daten setzen.


7
2017-09-18 05:57



  1. Die unidirektionale Datenbindung ist ein Ansatz, bei dem ein Wert aus dem Datenmodell entnommen und in ein HTML-Element eingefügt wird. Es gibt keine Möglichkeit, das Modell aus der Sicht zu aktualisieren. Es wird in klassischen Templatesystemen verwendet. Diese Systeme binden Daten nur in einer Richtung.

  2. Datenbindung in angularen Apps ist die automatische Synchronisierung von Daten zwischen den Modell- und Ansichtskomponenten.

Mit der Datenbindung können Sie das Modell in Ihrer Anwendung als Single-Source-of-Truth behandeln. Die Ansicht ist eine Projektion des Modells zu jeder Zeit. Wenn das Modell geändert wird, spiegelt die Ansicht die Änderung wider und umgekehrt.


5
2018-06-17 19:28