KO View Models : littéraux d'objet et fonctions

Dans Knockout JS, les modèles de vue peuvent être déclarés à l'aide de littéraux d'objet ou de fonctions. Bien que l'objectif principal des deux soit de définir des propriétés observables et des fonctions calculées, les principales différences entre elles ont un impact sur l'encapsulation, la flexibilité et l'organisation du code.

Litéraux d'objet :

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

Les littéraux d'objet sont simples et concis pour les modèles de vue simples sans logique complexe ni fonctions calculées. Cependant, ils :

• Ne donnent pas accès à un contexte prédéfini dans les fonctions calculées.
• Peut être difficile à gérer si le modèle de vue contient de nombreux observables et fonctions calculées.

Fonctions :

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

Les fonctions offrent plusieurs avantages :

• Encapsulation : L'utilisation d'une fonction encapsule la création du modèle de vue et de ses propriétés au sein d'un seul appel.
• ce contexte dans les fonctions calculées : Ce contexte est automatiquement lié à l'instance de modèle de vue, permettant un accès pratique à ses propriétés et méthodes dans fonctions calculées.
• Flexibilité : Les fonctions peuvent prendre des arguments et être utilisées pour initialiser le modèle de vue en fonction de données externes ou d'autres objets.

Meilleur Pratiques :

Dans la plupart des cas, il est recommandé d'utiliser une fonction pour définir les modèles de vue. Il offre une plus grande encapsulation et une plus grande flexibilité, facilitant la gestion des modèles de vue complexes et garantissant un accès approprié à ceux-ci.

Propriétés et méthodes privées :

Modèles de vue basés sur les fonctions activer la création de propriétés et de méthodes privées dans ce contexte en utilisant le modèle automatique :

var ViewModel = function() {
    var self = this;
    self.privateProperty = ko.observable();
    self.privateMethod = function() {};
};

Fonction de liaison :

Alternativement, les navigateurs modernes et Knockout JS fournissent la fonction de liaison pour lier explicitement une fonction à un contexte spécifique :

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

L'utilisation de la fonction de liaison garantit que cela fait référence à l'instance de modèle de vue même lors de l'appel de la fonction à partir d'une portée imbriquée.

Conclusion :

Bien que les littéraux d'objet et les fonctions puissent être utilisés pour définir des modèles de vue knock-out, les fonctions sont généralement préférées pour leur encapsulation, leur flexibilité et leur gestion efficace dans le calcul. fonctions.