Création du modèle dans le Template

Commençons par créer le modèle de structure html dans le template

voici le type de structure html dont nous avons besoin

<input type='hidden' id='mailles' value='{{mailles}}' />

<div id='mailleContainer' data-source='mailles'>
   <div id='stepModel' class='model step ' style='display:none' >
       <input type='hidden' data-property = 'IdEntite'  />
         
       <h6 data-property = 'Name' >title</h6>
       <div data-property = 'NoeudStartName'  class='cityStart fa fa-stopwatch'>Start</div>
       <div class='cursor'></div>
       <div data-property = 'NoeudEndName'  class='cityEnd fa fa-flag-checkered'>End</div>
       <div class='buttons' >
           <i class='fa fa-edit editMaille' title='Editer'></i>
           <i class='fa fa-eye detailMaille' title='Détail'></i>
           <i class='fa fa-trash deleteMaille' title=''Supprimer></i>
       </div>
       <div class='steps'></div>
   </div>        
</div>
  

Dans cette exemple la valeur du champ mailles et n'est bien évidement pas {{mailles}} mais un JSON remplacé en php lors de la génération de cette page. l'attribut data-source définie donc quel champ caché fait office de source de donnée. Les attributs data-property définissent la propriété de l'objet JSON que vous souhaitez afficher.

Chargement des données

Il ne reste plus alors qu'a charger le données via la fonction JS:

  View.Bind("mailleContainer");

Mise a jours des données

Dans notre exemple de catalogue et filtre de recherche, la derniéres étapes consiste donc à filtrer charges les résultats selon les fitlres de recherche. Il faut donc envoyer une requête ajax avec les critéres qui retourne un tableau des résultats en JSon. Il faut ensuite placer ce résultat dans lea sources de données puis rappler la fonctio View.Bind
Et voila rien de plus compliqué. Le but étant de ne pas avoir à écrire des scripts JS pour différents cas alors que le View.js peux s'adapter à toutes les situations.