Initiation knockout

Bonsoir à tous,

 

 

J’ai découvert un nouveau framwork js qui ma beaucoup attirer : Knockout !

L’auteur Steve Sanderson (développeur chez Microsoft) à posté dernièrement ce petit framework plutot novateur sous licence MIT (open source) basé sur le design pattern MVVM. Il est donc possible comme en C#/XAML de faire du data-binding ! Enfin fini de se noyer avec du code html + du code serveur. Quoique Twig avec symfony effectuer déjà cela ! Mais enfin on va pas se plaindre c’est une avancé que je trouve pas négligeable.

 

Donc sans plus attendre testons la bête !

 

Tout adord je vous invite a télécharger le script de seteve sanderson : https://github.com/SteveSanderson/knockout/downloads

 

un fois fait nous allons passer à un point théorique rapide.

 

 

J’ai parlé de design pattern MVVM, mais qu’est ce que c’est ? Pour ce qui connaisse MVC c’est un petit peu pareil. Dans le principe nous allons découpé notre code en plusieurs objet ayant chacun une fonction prédéfini. MVVM et donc l’abréviation pour Model (comme MVC ce la gabarit de vos données en quelque sorte) V (idem MVC contiendra l’affichage de votre vue) VM (le petit nouveau) petit explication de celui-ci paar exemple en c# quand on créer une page on d’un côté le code XAML (qui correspond a ce que l’on voie) et de l’autre le c# qui contient la programmation et le code behind. Ben le but viewModel (VM) c’est de contenir ce code behind pour lier les actions (ou commandes) entre les model et les vues.

Bon voilà avec cela on est a peu près parer pour faire du KO et surtout du MVVM.

 

 

1] Je créer 2 fichiers

Pourquoi trois fichiers ? Au départ il vaux mieux bien séparer vue et viewmodel pour éviter de se mélanger les pinceaux.

 

ici vous pouvez voir le nombre de fichier nécessaire

2] Notre cas

 

Nous allons effectuer un cas simple (je viens juste de m’y mettre ). Nous allons créer une personne avec un firstName et un lastName et effectuer quelque petite action dessus. Rien de bien méchant.

 

Commencons par la vue :

• Mettez deux paragraphe (un pour firstName et un pour lastName).
• Ajouter deux source de script (knockout et votre viewmodel). Cependant votre vues modèles doit obligatoirement être mis a la fin de votre page html petite astuce moi je la met entre le </body>et le </html>.
• Maintenant il vous suffit de databindind vos données du viewmodel [data-bind= »text: firstName »] ajouter cela a une balise strong par exemple.

 

 

votre vue

 

 

 

Ensuite le viewModel :

• Premièrement créer notre Viewmodel : il suffit de créer un fonction dans laquelle on pourra y mettre des variables et des commandes.
• Ensuite ligne importante qui doit aussi apparaître en dernières c’est celle-ci : ko.applyBindings(new maViewModel()); qui va permettre à ko d’effectuer le binding sur votre vue sur le modèle de votre viewmodel.

 

votre viewmodel

Si vous avez suivi le tuto vous devriez avoir votre nom sur la page.

 

résultat

 

Bravo vous avez réussi a mettre en place ko et MVVM (enfin pour MVVM c’est presque ça).

 

 

3] Toujours plus fort, toujours plus loin !

 

 

Ce n’est pas trop dinamyque nous allons autoriser le fait de changer ou modifier le nom.

 

Commençons par la vue :

• nous allons ajouter deux input. Mais nous allons dire a nos input que leur value est data-binder grâce a notre viewmodel.

 

 

Pour le moment ce n’est pas très dynamique ! Pas de souci Ko s’en charge ! Il va vous mettre Ko ^^

 

 

Dans le veiwmodel :

• signaler juste que vous valeur de first et lastName sont observable.

Réactualiser et modifier les valeurs ! Magique ! Ça marche !

 

Conclusion :

 

Ce petit framework est vraiment prometteur ! La mise en place et peut long. Et il est bien fait très intuitif vraiment une technologie a surveiller je pense !