Heim  >  Artikel  >  Web-Frontend  >  ## Objektliterale vs. Funktionen in Knockout.js: Welche Ansichtsmodelldeklaration ist die richtige für Sie?

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

Susan Sarandon
Susan SarandonOriginal
2024-10-26 13:30:31441Durchsuche

## 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 );
  • 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 ());

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);
    };
  • 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);
      }
    };
  • 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);
    };

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!

Stellungnahme:
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