Les Knockout Templates

Récemment, j’ai découvert un nouvelle « fonctionnalité » de knockout qui sont les templates.

Cela sert à créer une structure html qu’on peut répliquer et qui est attachée à une variable (qui peut être un objet ou n’importe quoi) dans le viewModel.

Par exemple, si dans votre site vous demandez que l’utilisateur entre son pays plusieurs fois dans votre code. Au lieu de répéter la même chose, vous pouvez mettre le code à répéter dans une balise script avec type=text/html et comme id le nom du template (ici selection-pays-template) :

Création du template


<!-- Notre template -->

<script type="text/html" id="selection-pays-template">

<label data-bind="text: label"></label>
<br/>

<select data-bind="options: liste_pays, value: pays_selectionne">

</select>

</script>

 

Associer le template à une balise

Pour associer un template avec un div par exemple, on doit utiliser le binding « template » à qui on indiquera :

  • En premier lieu le nom du template (c’est-à-dire l’id de la balise <script type=text/html> qu’on a créé précédemment).
  • Et en deuxième lieu l’objet qui contiendra les données à afficher, (ici selectionPaysOrigine qu’on créera dans notre viewModel, cela sera un objet de classe selectionPays qui contiendra la liste des pays et une variable qui contiendra le pays qui a été séléctionné).

<div data-bind="template:

{ name : 'selection-pays-template',

data :selectionPays }">

</div>

<!-- Ce div contiendra notre balise <select> et les données comme la liste des pays seront prises de la variable selectionPays -->

Dans le code javascript on va créer une classe selectionPays qui sera le view model qu’on utilisera avec chacun de nos petits templates de séléction de pays.

Création du viewModel de notre exemple de séléction de pays

Et bien sûr on crée le viewModel qu’on appliquera à la page html qui proposera à l’utilisateur de séléctionner son pays d’origine et son pays de résidence.
Le code final est :

<!-- Séléction du pays d'origine -->
<div data-bind="template: { name : 'selection-pays-template', data :selectionPaysOrigine}"></div>

<!-- Séléction du pays de résidence actuel -->
<div data-bind="template: { name : 'selection-pays-template', data :selectionPaysResidence}"></div>

<!-- Notre template -->
<script type="text/html" id="selection-pays-template">
<label data-bind="text: label"></label>
<select data-bind="options: liste_pays, value: pays_selectionne">
</select>
</script>

<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>

<script type="text/javascript">
// viewModel pour la page
function viewModel()
{
this.selectionPaysOrigine = new selectionPays("Séléctionnez votre pays d'origine");
this.selectionPaysResidence = new selectionPays("Séléctionnez votre pays de résidence actuel");
}

// La classe selectionPays qui "commandera le template" en quelques sortes
function selectionPays(f_label, arr_liste_pays)
{
this.label = f_label; // Le label qu'on affichera avant le <select>

if(typeof arr_liste_pays == "undefined") // Si on n'a pas donné de liste, on va mettre une liste par défaut
    arr_liste_pays = new Array("France","Canada","Allemagne","Russie");

this.liste_pays = ko.observableArray(arr_liste_pays);

this.pays_selectionne = ko.observable(); // Le pays séléctionné sera stocké dans cette variable
}

ko.applyBindings( new viewModel() );
</script>

Exécution du code :



On pourrait aussi rajouter un petit texte indiquant votre pays d’origine et pays de résidence histoire de voir la facilité de la chose. On rajoutera alors simplement dans le html, après les deux div de sélection ce code-là :

<p>Vous êtes donc de <b><span data-bind="text: selectionPaysOrigine.pays_selectionne"></span></b> !<br/>
Et vous habitez actuellement à <b><span data-bind="text: selectionPaysResidence.pays_selectionne"></span></b>, super !
</p>

Cela donnera :


Vous êtes donc de !
Et vous habitez actuellement à , super !


Pour conclure, avec ces templates on n’a pas à réécrire notre « structure » html répétitive comme une sélection de pays, un formulaire de recherche, etc.

Et en plus on n’a qu’à modifier un petit bout de html (modifier le template) pour que tout soit mis à jour dans toute notre page (ou tout notre site 😉 ).

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *