Heim > Web-Frontend > js-Tutorial > Hauptteil

## Objektliterale vs. Funktionen in Knockout.js: Welche Ansichtsmodelldeklaration ist die richtige für Sie?

Susan Sarandon
Freigeben: 2024-10-26 13:30:31
Original
440 Leute haben es durchsucht

## Object Literals vs Functions in Knockout.js: Which View Model Declaration is Right for You?

Unterschied zwischen Knockout-Ansichtsmodellen, die als Objektliterale und Funktionen deklariert werden

In Knockout.js können Ansichtsmodelle entweder als Objektliterale oder deklariert werden Funktionen. Während beide Ansätze dem Zweck dienen, Daten und Logik der Ansicht zugänglich zu machen, sind einige subtile Unterschiede zu berücksichtigen.

Objektliteraldeklaration:

var viewModel = {
    firstname: ko.observable("Bob")
};

ko.applyBindings(viewModel );
Nach dem Login kopieren
  • Einfache und saubere Syntax.
  • Dateneigenschaften werden sofort für die Ansicht verfügbar gemacht.
  • Berechnete Eigenschaften erfordern eine direkte Bindung an viewModel (z. B. viewModel.full()) oder die Verwendung mit Bindung.

Funktionsdeklaration:

var viewModel = function() {
    this.firstname= ko.observable("Bob");
};

ko.applyBindings(new viewModel ());
Nach dem Login kopieren

Vorteile der Verwendung einer Funktion:

  • Direkter Zugriff auf diesen Wert:
    Funktionen bieten sofortigen Zugriff auf die erstellte Instanz (dies) und ermöglichen präzise berechnete Eigenschaften und Methodendefinitionen.

    var ViewModel = function(first, last) {
      this.full = ko.computed(function() {
        return this.first() + " " + this.last();
      }, this);
    };
    Nach dem Login kopieren
  • Kapselung der Ansichtsmodellerstellung:
    Funktionen ermöglichen die Definition der Erstellung des Ansichtsmodells in einem einzigen Aufruf und stellen so sicher, dass alle Eigenschaften und Methoden korrekt initialisiert werden.
  • Privat festlegen Variablen mit self:
    Wenn Sie Probleme mit der richtigen Festlegung des Gültigkeitsbereichs haben, können Sie eine Variable (self) gleich der Ansichtsmodellinstanz festlegen und diese stattdessen verwenden, um den richtigen Kontext beizubehalten.

    var ViewModel = function() {
      var self = this;
      this.items = ko.observableArray();
      this.removeItem = function(item) {
        self.items.remove(item);
      }
    };
    Nach dem Login kopieren
  • Mit bind an this binden:
    Bei modernen Browsern kann die Bind-Funktion verwendet werden, um sicherzustellen, dass eine bestimmte Funktion mit dem richtigen this-Wert aufgerufen wird.

    var ViewModel = function() {
      this.items = ko.observableArray();
      this.removeItem = function(item) {
        this.items.remove(item);
      }.bind(this);
    };
    Nach dem Login kopieren

Die Wahl des zu verwendenden Ansatzes hängt von den spezifischen Anforderungen und Vorlieben Ihrer Anwendung ab. Funktionsdeklarationen bieten mehr Flexibilität und Kapselung, während Objektliteraldeklarationen einfacher und praktischer für grundlegende Szenarien sind, in denen private Variablen oder berechnete Eigenschaften nicht erforderlich sind.

Das obige ist der detaillierte Inhalt von## Objektliterale vs. Funktionen in Knockout.js: Welche Ansichtsmodelldeklaration ist die richtige für Sie?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!