## Modèles de vue Knockout : littéraux d'objet et fonctions – Quel est le meilleur ?

Objets et fonctions pour déclarer des modèles de vue Knockout

Dans Knockout JS, les modèles de vue peuvent être déclarés sous forme de littéraux d'objet ou de fonctions. Considérez les exemples suivants :

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

ko.applyBindings(viewModel );

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

ko.applyBindings(new viewModel ());

Bien que les deux approches atteignent le même objectif, définir des modèles de vue en tant que fonctions offre plusieurs avantages :

Accès direct à « ceci »

Au sein d'une fonction, « ceci » fait référence à l'instance en cours de création. Cela permet un accès facile aux observables et aux propriétés calculées du modèle de vue :

var ViewModel = function(first, last) {
  this.first = ko.observable(first);
  this.last = ko.observable(last);
  this.full = ko.computed(function() {
     return this.first() + " " + this.last();
  }, this);
};

En revanche, lors de l'utilisation de littéraux d'objet, une liaison de contexte explicite est requise dans les observables calculés :

var viewModel = {
   first: ko.observable("Bob"),
   last: ko.observable("Smith"),
};

viewModel.full = ko.computed(function() {
   return this.first() + " " + this.last();
}, viewModel);

Encapsulation et confidentialité des variables

Les fonctions fournissent une encapsulation plus naturelle pour les modèles de vue, car elles peuvent définir des variables privées qui ne sont pas exposées à la portée globale. Cela permet d'éviter les écrasements accidentels ou les conflits.

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray();
    this.removeItem = function(item) {
         self.items.remove(item);
    }
};

Enfin, les fonctions permettent une liaison facile à l'aide de la méthode 'bind', garantissant ainsi le contexte correct pour les fonctions de rappel :

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

En résumé , bien que les deux méthodes de définition des modèles de vue Knockout soient valides, l'utilisation de fonctions offre une plus grande flexibilité, un meilleur contrôle et des avantages d'encapsulation. Ces avantages font des fonctions un choix privilégié pour les modèles de vue plus complexes et maintenables.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!