Zusammenfassung der Avalon-Bindungseigenschaften in JavaScript

Avalon ist ein Front-End-MVVM-Framework, das den gesamten Front-End-Code vollständig in zwei Teile unterteilt. Die Ansichtsverarbeitung wird durch Bindung implementiert (Angular hat einen cooleren Begriff namens Anweisungen), und die Geschäftslogik ist in Objekten namens VMs konzentriert mit. Solange wir mit den Daten der VM arbeiten, werden diese automatisch und auf magische Weise mit der Ansicht synchronisiert.

$model (alle Nicht-$-Attribute), $event (Ereignisobjekt)

1. Bereichsabgrenzung

ms-controller: Bottom-up nach dem Prinzip von Nähe Scannen Sie den DOM-Baum

ms-important: Scannen Sie nur diesen Knoten und darunter als Scanbereich

ms-skip: Machen Sie die Bindung ungültig

2 -way-Bindung Definierte Attribute: Zusätzlich zur Bindung von Daten an den DOM-Knoten (VM synchronisiert Daten mit V), wird auch ein Listening-Ereignis heimlich an den Knoten gebunden. Wenn sich die Knotendaten ändern, werden die Daten in V mit synchronisiert VM rechtzeitig

(1) Text, Passwort, Textbereich erfordern, dass der Bindungswert eine Zeichenfolge ist (ms-duplex-text)

(2)radio: Bindung an booleschen Wert (ms -duplex-boolean)

(3)Kontrollkästchen: Als Array binden (ms-duplex-string)

(4)Auswählen: Als String oder Array binden (ms-duplex-string)

Gefolgt von ms-duplex2.0-Bindungsattributen

3. ms-visible: Ähnlich wie beim Umschalten wird der Ausdruck als wahr angezeigt und durch Einstellen der Anzeige auf „Blockieren“ oder „Keine“ angezeigt oder ausgeblendet.

4. Einfügungs- und Entfernungsverarbeitung ms-if: Knotenelement-Anzeigeelement hinzufügen, <!--ms-if--> Kommentar für versteckten Knoten festlegen (Knoten löschen)

5. Daten ms-data- * zwischenspeichern, ms-data verwenden, um das Objekt oder Array zu speichern (an das DOM-Knotenobjekt binden statt als Attribut), es auf dem Knoten speichern, die Rückgabe beim Anzeigen verarbeiten und als data-* binden Attribut

6. Attribut Operate ms-class(class),ms-duplex(value),ms-attr,ms-href,ms-src

boolesche Attribute: ms-attr-disabled ,ms-attr-readonly,ms-attr -selected,ms-attr-checked

String inhärente Attribute: ms-attr-id,ms-attr-name,ms-attr-title,ms-src, ms-href

Benutzerdefinierte Attribute: ms-attr-data-url, ms-attr-data-id

ms-class: ms-class='active' ms-class ='active:isOk'
ms-active,ms-hover

7, ms-duplex2.0

ms-duplex-string,ms-duplex-number,ms-duplex-checked,ms-duplex-boolean,ms-data-duplex

Hilfsdaten-Duplex-Fokus, Daten-Duplex-Geändert, Daten-Duplex-Ereignis

8. Stiloperationen: ms-css (inline), ms-class (externe Einführung)

<button ms-click="toggle" ms-css-width="100">显示</button> <span ms-if="flag">{{message}}</span>

9. Ereignisbindung: ms-on-eventName,ms-eventName

ms-mouseenter, ms-mouseleave (gilt nur für ausgewählte Elemente), ms -input(ms- on-input), die Bindungsreihenfolge mehrerer Ereignisse hat nichts mit natürlichen Zahlen zu tun, sondern hängt mit der Reihenfolge der Ereignisse zusammen

10 Schleifenoperation

ms-each-traverse temporäre Variablen (auf der Bindung des übergeordneten Elements)

ms-repeat – Temporäre Variablen durchlaufen (an untergeordnete Elemente binden)

ms-with – Temporäre Variablen durchlaufen (an untergeordnete Elemente binden). übergeordnete Elemente)

Array: el temporäre Standardvariable, $index der Index des aktuellen Elements, ob $first das erste Element ist boolean, $last, $remove gibt eine Funktion zum Löschen des aktuellen Elements $outer zurück Variable der inneren Schleife der äußeren Schleife

Hash (Objekt): $key Schlüsselname, $val Schlüsselwert, $outer ($outer.$index)

<ul> <li ms-repeat-e="data">{{e}}</li> </ul> <ul ms-each-e="data"> <li>{{e}}</li> </ul>

Ändern Sie den Schlüsselwert des Objekts:

Ändern Sie das Schlüsselwertpaar des Objekts:

Ändern Sie den Wert des Arrays: array object.set(subscript, value )

Ändern Sie den Wert des Objekts im Array :Array-Objekt [Subscript]

Traversal-Callback-Funktion (Eigenschaft)

data-each -rendered

data-with-rendered

data-repeat-rendered

data-with-sorted

Verwenden Sie die Größe, um die Datenlänge beim Schleifen zu berechnen , nicht Länge, verwenden Sie ms-if-loop anstelle von ms-if, da ms-if Vorrang vor ms-repeat hat

11 Vorlagenreferenz

12 🎜>13. Modulkommunikation

Im Folgenden wird die Abgrenzungsmethode von Avalon vorgestellt

Bei der Verwendung von AvalonJS für die Front-End-Entwicklung müssen Sie den Datenbindungsbereich abgrenzen. Es gibt drei Methoden:

(1) ms-controller: Dieses Bindungsattribut wird verwendet. Begrenzen Sie den Bereich basierend auf dem Prinzip der Nähe. Beginnen Sie zunächst mit diesem Tag und suchen Sie online

(2) ms-important: Dieses Bindungsattribut Sucht nur nach diesem Tag. Wenn die VM-Bindungsdaten nicht gefunden werden, werden sie unverändert auf der Seite ausgegeben.

(3) ms-skip: Die Funktion dieses Bindungsattributs besteht darin, Daten ungültig zu machen Bindung, das heißt, der Interpolationsausdruck wird unverändert ausgegeben, unabhängig davon, ob die gebundenen Daten im Bereich gefunden werden oder nicht