Commencez avec Knockout.js

Le transfert de la partie la plus difficile de l'application vers le côté client devient de plus en plus courant, reléguant ainsi les langages serveur au rang de ceux qui gèrent la persistance via les services DU REPOS.
Une partie de la responsabilité pour que tout cela se produise repose sur les nouvelles façons de travailler avec JavaScript et la génération d'interfaces utilisateurs dynamiques et réactives, grâce aux différentes cadres existant.
Ce framework a de nombreux atouts tels que son faible poids et sa documentation, ainsi que le fait qu'il est sur le marché depuis longtemps, il a donc mûri de manière constante pour pouvoir être appliqué dans des environnements de production.
1- Comme la plupart des bibliothèques et frameworks de JavaScript les exigences ne sont pas si exigeantes, dans ce cas nous aurons besoin d'un petit serveur web pour mieux traiter nos demandes, cela peut être Wamp dans les fenêtres ou une instance de Apache dans Linux ou alors Mac.
2- Nous avons besoin d'un éditeur de texte riche dans le style de Texte sublime ou alors Bloc-notes ++ être capable d'écrire le code nécessaire pour réaliser les exemples et exercices que nous allons montrer.
3- Enfin, nous avons besoin d'un accès Internet pour pouvoir télécharger Knockout.js même une fois.
Le processus d'installation est assez simple et ne dépend pas d'une plate-forme spécifique, le processus sera le même que nous soyons en Windows, Linux ou MAC.
La première chose que nous devons faire est de télécharger Knockout.js depuis sa page officielle, pour cela nous pouvons aller sur le site du projet et dans la section de téléchargements nous faisons un clic droit et sélectionnons l'option Enregistrer le lien sous:

AGRANDIR

Il est important que nous enregistrions le fichier dans un dossier pertinent à notre projet afin de l'inclure. Il peut également être installé en utilisant Tonnelle ou même l'utiliser à partir de l'un des CDN services afin de ne pas avoir à utiliser notre serveur comme référentiel de bibliothèque.
Une fois que nous avons le fichier, nous n'avons plus qu'à l'inclure dans un fichier HTML comme suit:

 Installation de Knockout.js 

Comme nous pouvons le voir, nous n'avons eu qu'à inclure le fichier téléchargé via une balise de script. Au cas où nous voudrions travailler avec la version du CDN Nous n'avons qu'à changer le chemin local vers le chemin Internet du fichier, c'est très similaire à travailler avec des bibliothèques telles que jQuery ou des cadres comme AngularJS.
Vue du modèle Vue du modèleLe titre de cette section peut sembler une erreur, Comment est-il possible de parler de Model View View Model ? Ce n'est pas pareil? Il s'avère que Assommer a un modèle de conception ou un paradigme de développement dont il s'inspire MVC, où certainement le Modèle et la Vue ils se comportent comme ce que nous connaissons de l'approche "classique", cependant nous avons une nouvelle couche appelée VoirModèle qui est chargé d'unir et de donner de la fonctionnalité à nos vues.
Liaison de données est la caractéristique principale de notre cadre qui nous permet d'indiquer au document HTML quels sont les éléments auxquels vous devez donner accès à Knockout.js, bien que cela ressemble à quelque chose de complexe, nous pouvons le résumer comme quelque chose de plus simple, c'est la simple application de propriétés aux éléments de l'arbre SOLEIL là où nous voulons qu'il soit performant Knockout.js.
Voyons l'exemple de code suivant, disons que nous voulons imprimer un nom de notre VoirModèle sur une étiquette à l'intérieur du corps, pour cela, nous n'avons qu'à faire ce qui suit :

 Installation de Knockout.js 

Nous voyons que dans notre étiquette h1 il y a une balise span et la balise span a une propriété qui n'est pas native de HTML quelle est la propriété liaison de données, c'est ce qui nous relie Knockout.js avec notre arbre DOM dans ce cas, nous avons simplement indiqué que le nom de la propriété ou de la variable doit être tiré de notre VoirModèle.
Si nous exécutons notre exemple dans le navigateur, nous obtiendrons un résultat comme celui que nous pouvons voir dans l'image suivante :

Avec cela, nous avons déjà fait notre première application en utilisant Knockout.js.
Maintenant, nous devons avoir compris que la philosophie VoirModèle est une partie importante du travail dans Knockout.js, c'est pourquoi nous allons continuer à approfondir un peu le sujet.
Création de VistaModelIl existe deux façons de créer une vue modèle, la forme de base et la forme orientée objet, celle que nous utilisons dépend déjà de notre façon de développer, bien que celle recommandée soit orienté objet car bien qu'il soit plus complexe au début, il nous permet d'obtenir un meilleur ordre dans notre application.
Créer un VoirModèle basique, nous avons juste à faire quelque chose comme ceci :

 var myModelView = {nom : 'Pedro Perez'};

Comme nous le voyons, ce n'est pas du tout complexe, nous définissons simplement une variable et plaçons un contenu de style dessus. JSON.
Maintenant le chemin orienté objet nous permet de créer des méthodes d'accès et de manipulation des propriétés que nous voulons placer dans notre VoirModèle, pour cela, nous pouvons faire quelque chose comme ce qui suit :

 var myOOOOOFModelView = function () {var self = this; self.name = 'Jonathan'; self.nom = 'Acosta'; self.getName = function () {return self.name + '' + self.last name; };};

Si nous voulons dans ce cas, nous pouvons accéder directement au nom ou au prénom individuellement, ou utiliser la méthode obtenirNom () qui nous donne le nom et le prénom joint ou concaténé.
Ici beaucoup peuvent se demander s'il n'était pas plus facile de faire un solo Chaîne de caractères Avec le nom et le prénom, la réponse est très simple, plus nous avons d'options, plus l'application sera simple à notre avis, imaginez que nous voulions seulement le nom, avec la forme de base nous aurions dû traiter la chaîne pour être capable de les séparer, dans le changement orienté objet nous n'accédons qu'à la propriété qui nous intéresse.
Jusqu'à présent, ce que nous avons vu est très statique, et si maintenant nous commencions à utiliser des paramètres, de cette manière un VoirModèle Cela peut servir à plusieurs fins, puisque nous ne nous limiterons pas à ce que nous établissons, mais nous pouvons modifier les données en fonction de la situation.
Réécrivons notre forme orienté objet, et nous utiliserons le formulaire suivant :

 var myOOOOOOOFModelView = fonction (prénom, nom) {var self = this; self.name = nom; self.lastname = nom de famille; self.getName = function () {return self.name + '' + self.last name; };};

Comme nous avons pu le voir, il était très facile d'implémenter l'utilisation de paramètres, nous allons maintenant implémenter cela dans notre premier exemple et ainsi voir comment tout s'emboîte, pour cela nous utiliserons le code HTML suivant :

 Installation de Knockout.js 

Ici, la première chose que nous remarquons est que le liaison de données ce n'est plus texte comme dans l'exemple initial sinon on utilise html, cela nous permet d'envoyer des étiquettes html et ainsi pouvoir donner plus de style à notre réponse du VoirModèle.
Déjà dans la section où nous définissons notre VoirModèle on voit qu'avant d'appliquer le contraignant de Knockout.js, nous faisons une instance de notre ViewModel orienté objet, C'est à ce stade où nous pouvons donner les valeurs à nos paramètres ou propriétés, comme nous pouvons le voir nous avons gardé notre séparation de nom et prénom mais au final nous pouvons utiliser la méthode qui les concatène.
Lorsque nous exécutons notre exemple, il nous donne les résultats suivants dans le navigateur :

Il y aura ceux qui se demanderont ce que ce cadre a qu'il ne propose pas déjà AngularJS ou alors Backbone.js, et ils ont raison dans leur questionnement, cependant la réponse que nous leur donnons est que c'est juste une option de plus qu'ils peuvent avoir à leur disposition, il a ses points forts comme une bonne documentation et le faible poids de sa mise en œuvre (seulement environ 20 kb), Mais comme pour tout, chacun est libre de choisir l'outil qui lui permet d'atteindre ses objectifs et qui correspond le mieux aux exigences du moment.
Avec cela, nous terminons notre tutoriel, nous avons réussi nos premiers pas avec Knockout.js, avec cela, nous pouvons commencer à réfléchir à toutes les possibilités que ce cadre de développement d'applications nous offre avec une logique côté client.