Nous verrons dans les coulisses pour mieux comprendre les modèles Kendo UI Builder, qui vous aident à créer de belles expériences web OpenEdge dans Angular.
Dans mon premier post sur UI Kendo Builder modèles, nous avons appris sur les éléments distincts nécessaires pour composer une vue personnalisée au moment du design et au moment de l'exécution. Dans ce blog, nous allons explorer ce qui se passe dans les coulisses afin d'améliorer notre compréhension; De plus, nous apprendrons à utiliser le HTML dans les propriétés de vue et à soutenir l'internationalisation.
Rappel: Si vous ne l'avez pas fait en lisant le premier post vous pouvez télécharger l'exemple custom-hello-world-v1 de ce dépôt github à suivre. 19659004] Fichier de métadonnées de module
Lorsque nous ajoutons la vue personnalisée au module, une entrée est créée dans le fichier de métadonnées du module.
Vous pouvez vérifier cela en ouvrant le fichier du module dans meta modules. Par exemple, pour un module appelé "HelloWorld", nous ouvrons meta modules HelloWorld.json.
Dans la propriété children nous trouvons des salutations et titleX. Notez également comment viewType est affecté à custom-hello-world-v1
Voici un extrait:
Ceci est réalisé comme suit:
- Nous ne voulons pas que les balises HTML soient rendues explicitement mais plutôt que nous voulions qu'elles soient interprétées comme du HTML.
Dans le temple du design (template.html.ejs), nous utilisons une syntaxe EJS différente pour la sortie salutation contre titre:- : Cela n'échappera pas HTML. pour définir cette propriété avec des balises HTML.
- va échapper HTML.
- Comme la chaîne de salutation sera insérée dans le code généré, nous devons nous assurer que les guillemets, par exemple dans class = "fa fa-thumbs-up" ne ferment pas le Javascript ou chaîne typographique trop tôt.
Dans les deux custom-hello-world-v1 angularjs options.json.ejs et custom-hello-monde-v1 angular __ nom __. Base .component.ts.ejs nous devons échapper les guillemets avec ".Voir ces lignes de code:
- Dans options.json.ejs: "salutation": ""
- Dans __name __. Base.component.ts.ejs:
public salutation: string = "";
Note sur le traitement EJS : affiche la valeur de salutation. appelle la fonction JavaScript replace sur la valeur de chaîne de salutation avant de la sortir. Dans EJS, nous pouvons utiliser les expressions JavaScript là où nous en avons besoin.
Pour essayer, dans KUIB, entrez: <i class = "fa fa-thumbs-up "> & nbsp; Bonjour pour la propriété d'accueil.
Vous devriez voir:
La nécessité d'échapper les guillemets doubles ne se limite pas à l'utilisation de chaînes HTML.Toute propriété de chaîne peut potentiellement les contenir.Donc, il est recommandé d'échapper les guillemets doubles pour toutes les propriétés de la chaîne. ce que nous faisons avec la propriété title
Traduction
generator / index.js a un point d'entrée getTranslation, ce qui nous permet de spécifier les propriétés à ajouter au fichier de traduction.
Lorsque nous spécifions:
const traduction = {
label: view.label || view.name,
titre: view.titleX,
message d'accueil: view.greeting
};
Lorsque nous utilisons le Générer la fonction, Kendo UI Builder crée trois entrées dans le fichier de traduction par défaut (app src translations translations.default.json).
Remarquez comment nous spécifions titleX pour obtenir la valeur de propriété pour title. En effet, la valeur est résolue à partir du nom de la propriété dans le fichier de définition.
Toutes les paires clé / valeur retournées sont créées, dans le fichier de traduction par défaut, sous la clé de vue spécifique illustrée dans l'image ci-dessous:
Source link