Share
Dans la deuxième et dernière partie de cette mini série, nous terminerons cette introduction par des sections sur la sortie du code Ruby, l’interpolation, le texte brut et sur la façon de personnaliser Slim en fonction de vos besoins. Après cet article, vous devriez être prêt pour une action Slim.
Vous avez déjà vu un peu comment utiliser Ruby dans vos modèles. Cette section vous donne tout ce dont vous avez besoin pour vous en servir. Dans le premier article, nous utilisions déjà Ruby dans nos modèles. Laissez-moi vous rappeler ce que je veux dire:
titre html = stylesheet_link_tag 'application', média: 'tout', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Comme vous pouvez le constater, dans cette balise de tête, nous avons déjà utilisé quelques méthodes de Rails pour gérer les styles et les éléments JavaScript, sans rien de majeur. Tout ce que vous avez à faire pour exécuter du code Ruby est de le remplacer par un égal = signe. Si votre code doit s'étendre sur plusieurs lignes, ajoutez simplement une barre oblique inverse. \ à la fin de chaque ligne et continuez sur la suivante. Si vous terminez la ligne par une virgule ,, alors vous n'avez pas besoin de la barre oblique inverse. Gentil petit contact si vous me demandez.
Regardons un autre exemple plus concret. L'écriture de formulaires est souvent pénible, beaucoup de code passe-partout, de répétition, et tout cela est redoutable. <%= %> signes dans ERB. Cela peut devenir compliqué en un rien de temps. Pourrait être plus gentil, hein?
<%= form_for @agent do |f| %> <%= f.label :name %> <%= f.text_field :name %> <%= f.label :number %> <%= f.text_field :number %> <%= f.label :licence_to_kill %> <%= f.check_box :licence_to_kill %> <%= f.label :gambler %> <%= f.check_box :gambler %> <%= f.label :womanizer %> <%= f.check_box :womanizer %> <%= f.submit %> <% end %>
Beaucoup de choses à écrire pour créer un nouveau @agent objet, non? Slim vous permet de gérer cela beaucoup plus succinctement. Nous ne faisons que garder le signe d'égalité et nous débarrasser de la plupart des choses Tadaa!
= form_for @agent do | f | = f.label: name = f.text_field: name = f.label: number = f.text_field: number = f.label: licence_to_kill = f.check_box: licence_to_kill = f.label: joueur = f.check_box: joueur .label: womanizer = f.check_box: womanizer = f.submit
Vous pouvez clairement voir pourquoi ce projet s’appelle Slim. Tant d'excès de graisse est parti. Ne me dis pas que tu n'aimes pas ce que tu vois, je sais que tu le creuses! Juste un = signe et vous pouvez remplir votre balisage avec le code Ruby - dans ce cas, de Rails, bien sûr. Et quand vous le comparez au HTML affiché sur la dernière page, il est difficile d’ignorer à quel point le format Slim est vraiment compact..
Rappelez-vous la question initiale sur laquelle l'équipe principale de Slim est guidée: «Quel est le minimum requis pour que cela fonctionne?» Lorsque vous regardez la sortie HTML finale, je suppose qu'il est juste de dire que Slim a répondu à cette question avec succès - aucune plainte de mon côté. Je veux ajouter quelques exemples plus petits pour vous donner plus de temps pour vous habituer à quoi ça ressemble dans Slim.
Cet extrait d'ERB…
<%= render "shared/agents", collection: @agents %>
… Devient ceci dans Slim:
= rendre "agents partagés", collection: @agents
Agents
h2 Agents ul - @ agents.each do | agent | li.agent div | Nom: = agent.name div | Nombre: = agent.number div | Licence de mort: = agent.licence_to_kill
Vous pouvez également écrire ceci de manière plus rationnelle par interpolation. Vous ne voulez pas devenir trop fou avec celui-là, cependant. Cela ressemblerait à ceci alors:
h2 Agents ul - @ agents.each do | agent | li.agent div Nom: # agent.name Numéro div: # agent.number div Licence de destruction: # agent.licence_to_kill
Je l'ai déjà mentionné brièvement auparavant, mais puisqu'il s'agit d'une forme de sortie de code Ruby, il appartient également à cette section. Vous pouvez également utiliser l’interpolation de texte standard à partir de Ruby dans vos modèles Slim..
h2 Bienvenue Mr. # misix_agent.surname! J'attends que tu meurs! h2 Bienvenue Mr. \ # misix_agent.surname! J'attends que tu meurs!
Bienvenue M. Bond! J'attends que tu meurs!
Bienvenue Mr. \ # misix_agent.surname! J'attends que tu meurs!
Comme vu ci-dessus, une simple barre oblique inverse \ échappe à l'interpolation.
Un de plus pour la route. Supposons que vous souhaitiez utiliser deux conditions conditionnelles à votre avis. Semblable à Haml, vous signifiez un code Ruby qui n'est pas censé être affiché sur la page par un simple tiret -. Vous avez vu cela dans l'exemple ci-dessus où nous avons utilisé cela pour parcourir plus de @agents sans afficher cette partie du code.
Bien que vous devriez essayer d'éviter autant que possible toutes sortes de conditionnels dans vos vues et d'essayer de trouver de meilleures solutions de POO pour de tels cas - ce qui est une histoire pour une autre fois - ils ressembleraient à ceci:
- si current_user.role == "admin" p # admintxt | Bienvenue mon maître! = link_to "Edit Profile", edit_user_path (: current) = link_to "Logout", logout_path - elsif utilisateur_du courant = link_to "Edit Profile", edit_user_path (: current) = link_to "logout", logout_path - else = link_to "Register", new_user_path = link_to "Login", login_path
<% if current_user.role == "admin" %>Bienvenue mon maître!
<%= link_to "Edit Profile", edit_user_path(:current) %> <%= link_to "Logout", logout_path %> <% elsif current_user %> <%= link_to "Edit Profile", edit_user_path(:current) %> <%= link_to "Logout", logout_path %> <% else %> <%= link_to "Register", new_user_path %> <%= link_to "Login", login_path %> <% end %>
Si vous souhaitez générer du code sans échappe au code HTML, utilisez simplement deux signes d’égalité. ==. C'est tout!
Avant de continuer, je devrais absolument prendre le temps de mentionner ceci: Comme vous le savez sans doute, des tonnes de code de visualisation - ou des tonnes de code Ruby dans notre contexte - dégagent une odeur sérieuse et doivent être minimisées à tout moment. Ce n’est pas parce que Slim rend plus attrayant encore de plâtrer vos modèles avec beaucoup de logique. Contrainte de pratique dans ce département! Bien fait, au contraire de Slim, il est vraiment élégant d’injecter du Ruby là où cela est nécessaire.
Si vous ressentez le besoin d'écrire du HTML dans vos modèles Slim, vous avez la possibilité de le faire. Je n'ai pas utilisé cette fonctionnalité et je ne voudrais pas l'utiliser, mais peut-être pendant une phase de transition cela pourrait-il être utile pour les nouveaux arrivants. Regardons très vite.
doctype html head title = full_title (rendement (: title)) = stylesheet_link_tag 'application', support: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags header.navbar .logo = link_to "exemple d'application", 'chemin_racine', id: "logo" .principal = rendement
Quand Slim rencontre le crochet d’angle gauche <, il sait que vous voulez mélanger du HTML.
Le personnage de pipe | signale à Slim que vous souhaitez un texte en clair (mot pour mot) et ne fait que copier la ligne. En effet, cela vous permet d'éviter tout type de traitement. La documentation indique que si vous souhaitez écrire un texte in extenso sur plusieurs lignes, vous devez l'indenter à chaque saut de ligne..
corps p | Slim est ma nouvelle meilleure amie. Slim est mon nouveau meilleur ami.
Slim est ma nouvelle meilleure amie. Slim est mon nouveau meilleur ami.
Si vous placez le texte sur la même ligne que le caractère de canal, vous pouvez définir la marge de gauche après le canal et un seul espace. Par curiosité, je me suis un peu amusé avec ça et j'ai trouvé les résultats suivants. Vous devez être conscient que seul le dernier exemple de variation présente un petit hic évident: il avale le premier mot de la phrase.
corps p | Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Et ainsi de suite… p | Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Et ainsi de suite… p Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Et ainsi de suite… p Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Et ainsi de suite… p Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Le rendu de la sortie dans votre balise HTML diffère un peu.
Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
la ligne est sur la marge gauche. la ligne aura un espace devant elle. la ligne aura deux espaces devant elle. bientôt…
Bien sûr, il est nécessaire de commenter votre code de temps en temps. N'oubliez pas cependant que trop de commentaires sont aussi une odeur. Essayez juste de le garder au minimum absolu!
Une barre oblique / est tout ce dont vous avez besoin pour commenter n'importe quel code.
corps / p | Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Boom! Et maintenant, ce paragraphe est parti de la page. Ce commentaire ne laisse aucune trace dans le balisage HTML final. Il vous suffit de l'appliquer au sélecteur de parents et tous ses enfants seront également commentés. Donc, même les commentaires sont minces et minimes.
Si, par contre, vous voulez un commentaire HTML qui apparaît dans la sortie finale rendue, il vous suffit d'ajouter un point d'exclamation ! après le slash.
corps /! p | Cette ligne est dans la marge de gauche. Cette ligne aura un espace devant elle. Cette ligne aura deux espaces devant elle. Etc…
Soigné!
Nous avons toujours utilisé des raccourcis. Quand vous tapez un point . ou un symbole de hachage # vous indiquez à Slim que vous souhaitez utiliser des raccourcis prédéfinis pour les classes et les identifiants. C'est certainement un très beau paramètre par défaut, mais que pouvez-vous faire pour développer cela et créer vos propres petits bouts de snippety? Nous pouvons le faire pour les balises et les attributs. Bienvenue dans le charme de Slim!
Dans Rails, il suffit de configurer un initialiseur avec le motif suivant:
Slim :: Engine.set_options raccourci: 'c' => tag: 'conteneur', '#' => attr: 'id', '.' => attr: 'class'
Dans les applications Sinatra, vous ajoutez simplement la même configuration n'importe où sous la ligne où vous nécessite 'slim'.
Accentsconagua
require 'sinatra' require 'slim' raccourci Slim :: Engine.set_options: 'c' => tag: 'conteneur', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html head titre Slim Templates body h1 Boss Modèles de niveau avec SlimVous pouvez définir des options sur Slim :: Engine en fournissant un hachage avec le raccourci dont vous avez besoin. Dans l'exemple ci-dessus, nous avons demandé à Slim d'utiliser c comme raccourci pour un récipient étiquette. Vous l'utiliseriez comme ceci dans vos fichiers Slim:
c.content Maintenant vous avez une balise conteneur avec une classe .content.
Et le rendu HTML ressemblerait à ceci, bien sûr:
Maintenant, vous avez une balise conteneur avec une classe .content.
Assez sympa, hein? Mais vous ne pensiez pas que la musique s'arrête là, n'est-ce pas? Nous pouvons aller plus loin que cela. Laissez-moi vous donner un exemple un peu plus compliqué:
Slim :: Engine.set_options raccourci: '#' => attr: 'id', '.' => attr: 'classe', 'c' => étiquette: 'conteneur', '&' => étiquette: 'entrée', attr: 'type', '@' => attr: 'rôle', '^' => attr:% w (rôle de rôle de données)
Dans cet exemple, non seulement j'ai créé des balises personnalisées, mais j'ai également fourni des attributs personnalisés pratiques. Disséquons cette étape par étape. À propos, j’ai cassé le hachage d’options sur plusieurs lignes pour le garder lisible et éviter d’avoir une longue ligne de code sur laquelle personne n’aime tomber. Lit beaucoup mieux, vous ne pensez pas?
Via le symbole esperluette Et, nous pouvons maintenant créer une balise input et il nous suffit de lui donner un type qui suit immédiatement l'esperluette. Nous pouvons utiliser n’importe quel symbole utile; il n'y a pas besoin d'utiliser le même que j'ai fait. Soyez prudent, cependant, et essayez de prendre des décisions sans compromis dans ce département.
& text name = "utilisateur" & password name = "pw" & submit
Lorsque vous apportez des modifications à cet initialiseur avec vos raccourcis personnalisés, vous ne devez pas oublier de redémarrer votre serveur local. Sans cela, vos modifications ne seront pas répercutées lors du prétraitement..
Ensuite, si j'ai besoin d'un rôle attribut, je peux maintenant simplement le préfixer avec un @ symbole.
.personne @ admin Daniel Mendler
Daniel Mendler
Actualisation: l'attribut role est une approche sémantique permettant de décrire le rôle de l'élément en question, si vous devez déterminer le but de l'élément..
Voir, via le point nous obtenons un classe = "personne" la classe et la @admin nous a donné un role = "admin". Très pratique, mais nous pouvons aller plus loin et utiliser un tableau pour spécifier plusieurs attributs devant être créés via un seul raccourci.
.Nifty ^ hacker CrackDoctor
CrackDoctor
Parce que nous avons associé un tableau d’attributs à notre ^ raccourci, Slim crée data-role et rôle attributs simultanément via un seul symbole. Cela peut être très utile. Imaginez si vous voulez sortir un élément similaire au suivant et le faire de manière concise avec un raccourci et du code Ruby.
Écrire tout cela à la main ne semble pas être la meilleure utilisation de votre temps - nous avons du code pour faire ce travail pour nous. Eh bien, voilà, c’est tout ce que vous devez savoir pour créer votre propre ensemble de raccourcis impressionnants ou pour créer un grand désordre lorsque vous ne pratiquez pas un peu de contrainte. Je vous recommande de ne pas abuser de cette méthode, essayez surtout d'éviter de définir des raccourcis utilisant des symboles auxquels Slim est déjà attaché..
Actualisation: Les attributs de données sont utilisés pour avoir des données privées sur votre page ou votre application. Des éléments qui vous aident à filtrer le contenu, par exemple. Ce sont des attributs personnalisés qui peuvent être utilisés sur tous les éléments HTML. Leur utilisation à des fins JavaScript est une autre pratique courante. C'est également très pratique pour tester des éléments sur une page si vous voulez vous assurer que des éléments particuliers apparaissent et que vous voulez éviter que les concepteurs gâchent vos styles..
Avant de partir, je voulais vous montrer un petit aperçu des vastes options de configuration et de la façon dont vous les appliquez. Pour Rails, vous créez un fichier d’environnement comme config / environnements / développement.rb et spécifiez les options dont vous avez besoin. Vous placez simplement votre configuration quelque part dans le Rails.application.configure bloc.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' "'=>'" ',' ‹'=>'› '' EndDans cette configuration, je me suis assuré que la balise par défaut qui est créée si un nom de balise est omis est un tag-not a div tag, qui est le réglage standard. De plus, j'ai ajusté la taille de la tabulation pour qu'elle utilise deux espaces blancs et finalement ajouté deux autres délimiteurs pour envelopper les attributs des balises. Maintenant je peux utiliser ‹› et "" aussi bien pour ça. Pas très utile mais bon pour la démonstration.
Dans l'exemple ci-dessous, vous pouvez voir que tous les délimiteurs pour les wrappers d'attributs créent la même sortie. .une classe ou # some-id crée balises par défaut.
body #zeroth a href = "http://slim-lang.com" title = "Page d'accueil" Aller à la page d'accueil .voir un [href = "http://slim-lang.com" title = "Accueil page "] Aller à la page d'accueil .second a (href =" http://slim-lang.com "title =" Page d'accueil ") Aller à la page d'accueil .third a‹ href = "http: // slim-lang. com "title =" Page d'accueil "› Aller à la page d'accueil .fourth a "href =" http://slim-lang.com "title =" Page d'accueil "" "Aller à la page d'accueil
Aller à la page d'accueil Aller à la page d'accueil Aller à la page d'accueil Aller à la page d'accueil Aller à la page d'accueil
Alternativement, vous pouvez également définir ce genre de choses dans config / initializers / slim.rb comme je vous l'ai montré dans la section sur les raccourcis personnalisés.
Pour Sinatra, il s’agit du même exercice que celui décrit dans la section des raccourcis. Il suffit de définir vos options quelque part en dessous de votre nécessite 'slim' déclaration et vous êtes bon pour aller.
Consultez la documentation sous «Options disponibles» pour en savoir plus sur les éléments disponibles pour la configuration. Slim vous offre de nombreuses options pour jouer avec.
C'est fondamentalement ça. Il y a un ou deux sujets plus avancés dans lesquels vous devriez approfondir au besoin, mais je pensais qu'ils n'étaient généralement pas conviviaux pour les débutants, ni très utilisés au quotidien. Je voulais que les choses restent simples et que je vous montre tout ce dont vous avez besoin pour passer rapidement à cet impressionnant moteur de templates. Amusez-vous et j'espère que Slim est maintenant l'un de vos nouveaux jouets préférés!
