Traitement des événements dans les modèles Kendo UI Builder

Comme dans le premier blog, nous allons examiner les trois éléments principaux que nous devons programmer:

1. Le fichier de définition d'affichage personnalisé
2. Les éléments au moment de la conception
3. Les éléments de l'exécution

Pour continuer, téléchargez le fichier .zip des exemples de modèles à partir de GitHub ou clonez le dépôt ; ouvrez le dossier custom-hello-world-v2 et suivez les mêmes étapes décrites dans ce post pour installer ce modèle dans votre application cible

Custom View Definition File

Nous spécifions au concepteur que nous voulons un gestionnaire d'événements unique pour le panneau des propriétés de la vue. Cela permet à l'utilisateur de spécifier le nom de la fonction qui sera appelée lors du clic.

Voici l'extrait pertinent du fichier custom-hello-world-v2.json:

Et voici comment il rend dans le concepteur:

Comme expliqué dans le premier article, un objet avec sous-structure est représenté avec des panneaux extensibles / pliables, et nous en voyons un exemple ici.

Pour rappel, l'utilisateur doit implémenter la fonction spécifiée dans le panneau de propriétés de la vue dans le fichier de contrôleur public (pour AngularJS) ou dans le fichier de composant public (pour Angular 5.)

KUIB ne transmet pas les événements de souris ou de clavier à la vue de conception. Donc, nous n'avons pas besoin d'implémenter quoi que ce soit pour l'événement onClick pour la vue design

Run-Time Elements

Les choses ici sont relativement simples:

Dans template.html.ejs:

l'utilisateur a défini un gestionnaire de clic dans la propriété view, nous ajoutons le gestionnaire à div. Notez comment nous utilisons les expressions JavaScript dans EJS pour tester la présence du gestionnaire d'événements.

Pour AngularJS, nous utilisons la syntaxe ng-click = "appel de fonction".

Pour Angular 5, nous use (event) = syntaxe "appel de fonction". Plus précisément, pour un événement click, nous utilisons (click) = "appel de fonction"

A ce stade et en pratique, vous n'avez rien d'autre à faire car il est de la responsabilité de l'utilisateur d'ajouter la fonction implémentation dans la classe publique pour le contrôleur (AngularJS) ou pour le composant (Angular 5). Cependant, pour rendre l'échantillon autonome et travailler hors de la boîte, nous avons ajouté une implémentation par défaut pour onClick .

Ouvrez soit custom-hello-world-v2 / angularjs / controller.js. ejs ou custom-hello-monde-v2 / angular / __ name __. component.html.ejs et notez comment, avec la syntaxe EJS, nous définissons la fonction en utilisant le nom du gestionnaire d'événements tel que défini par l'utilisateur dans la propriété view: [19659081] <% si (events.onClick) {%>

2. <%- events.onClick %> (e) {

3. alert (`Dans par défaut implémentation pour <%- events.onClick %>

4. - Vous devriez remplacer cette fonction dans la classe de contrôleur public. »)

5. }

6. <% } %>