Share
En la segunda y última parte de esta mini serie, terminaremos esta introducción con secciones sobre cómo generar código Ruby, interpolación, texto sin formato y cómo personalizar Slim según sus necesidades. Después de ese artículo deberías estar listo para alguna acción Slim..
Ya has visto un poco acerca de cómo usar Ruby en tus plantillas. Esta sección le brinda todo lo que necesita para hacer uso de esto. En el primer artículo, ya hemos estado usando Ruby en nuestras plantillas. Déjame recordarte lo que quiero decir:
html head title = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags
Como puede ver, dentro de esta etiqueta de cabecera, ya usamos un par de métodos de Rails para lidiar con los estilos y las cosas de JavaScript: nada importante. Todo lo que necesitas hacer para ejecutar el código de Ruby es anteponerlo con un igual = firmar. Si su código necesita extenderse en varias líneas, simplemente agregue una barra invertida \ al final de cada línea y continúa en la siguiente. En caso de que termines la línea con una coma. ,, entonces no necesitas la barra invertida. Un buen toque si me preguntas.
Echemos un vistazo a otro ejemplo más concreto. Escribir formularios es a menudo una gran cantidad de código repetitivo, mucha repetición y todos estos temidos <%= %> Signos en ERB. Esto puede ensuciarse en ningún momento. Podría ser mejor, eh?
<%= 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 %>
Un montón de cosas para escribir para crear un nuevo @agente objeto, no? Slim te permite manejar esto mucho más sucintamente. Simplemente mantenemos el signo igual y nos deshacemos de la mayoría de las otras cosas. 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: gambler = f.check_box: gambler = f .label: womanizer = f.check_box: womanizer = f.submit
Se puede ver claramente por qué este proyecto se llama Slim. Se ha ido tanto exceso de grasa. No me digas que no te gusta lo que ves, sé que lo estás investigando. Solo un = Firme y puede rellenar su marca con el código Ruby, en este caso de Rails, por supuesto. Y cuando lo comparas con el HTML representado en la página final, es difícil ignorar qué tan compacto es Slim.
Recuerde la pregunta inicial por la cual el equipo central de Slim se guía por: "¿Cuál es el mínimo requerido para hacer que esto funcione?" Cuando observa la salida HTML final, creo que es justo decir que Slim ha respondido esa pregunta con bastante éxito, sin quejas en mi final Quiero agregar un par de pequeños ejemplos para darle más oportunidad de acostumbrarse a cómo se ve esto en Slim.
Este fragmento de código ERB ...
<%= render "shared/agents", collection: @agents %>
... se convierte en esto en Slim:
= render "compartido / agentes", colección: @agents
Agentes
Agentes h2 ul - @ agents.each do | agent | li.agent div | Nombre: = agent.name div | Número: = agent.number div | Licencia para matar: = agent.licence_to_kill
También puede escribir esto de una manera más ágil a través de la interpolación. Aunque no quieres volverte demasiado loco con eso. Esto se vería así entonces:
Agentes h2 ul - @ agents.each do | agent | li.agent div Nombre: # agent.name div Número: # agent.number div Licencia para matar: # agent.licence_to_kill
Mencioné esto antes brevemente, pero como es una forma de generar código Ruby, también pertenece a esta sección. Por supuesto, también puede utilizar la interpolación de texto estándar de Ruby en sus plantillas Slim..
h2 ¡Bienvenido señor # misix_agent.surname! ¡Espero que te mueras! h2 ¡Bienvenido Sr. \ # misix_agent.surname! Espero que mueras!
¡Bienvenido señor Bond! Espero que mueras!
¡Bienvenido señor \ # misix_agent.surname! Espero que mueras!
Como se ve arriba, una barra invertida inicial simple \ escapa a la interpolacion.
Una más por el camino. Supongamos que desea utilizar un par de condicionales en su vista. Al igual que Haml, significa que el código Ruby no se debe enviar a la página con un simple guión. -. Has visto esto en el ejemplo anterior, donde lo usamos para iterar sobre @agentes sin mostrar esa parte particular del código.
Aunque debería tratar de mantenerse alejado de todo tipo de condicionales en sus puntos de vista donde sea posible y tratar de encontrar mejores soluciones de POO para tales casos, que es una historia para otro momento, se verían así:
- if current_user.role == "admin" p # admintxt | ¡Bienvenido de nuevo mi maestro! = link_to "Editar perfil", 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
<% if current_user.role == "admin" %>Bienvenido de nuevo mi maestro!
<%= 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 desea generar código sin que el HTML se escape en su lugar, simplemente use dos signos iguales ==. Eso es!
Antes de continuar, definitivamente debería tomarme el tiempo para mencionar esto: como usted sabe, muchas toneladas de código de vista, también conocido como toneladas de código de Ruby en nuestro contexto, son un olor grave y deben minimizarse en todo momento. Solo porque Slim lo hace incluso más atractivo para enlucir tus plantillas con toneladas de lógica, no significa que debas hacerlo. ¡Practica la restricción en ese departamento! Por otro lado, Slim lo hace realmente elegante para inyectar Ruby cuando sea necesario.
Si siente la necesidad de escribir HTML en sus plantillas Slim, tiene la opción de hacerlo. No he usado esa función, ni me importaría usarla, pero tal vez durante una fase de transición esto podría ser útil para los recién llegados. Vamos a echar un vistazo súper rápido.
doctype html head title = full_title (yield (: title)) = stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true = javascript_include_tag 'application', 'data-turbolinks-track' => true = csrf_meta_tags header.navbar .logo = link_to "aplicación de ejemplo", 'root_path', id: "logo" .main = rendimiento
Cuando Slim encuentra el soporte de ángulo izquierdo <, Sabe que quieres mezclar en algún HTML..
El personaje de la pipa | señala a Slim que desea tener texto sin formato (palabra por palabra) y simplemente copia la línea. En efecto, esto le permite evitar cualquier tipo de procesamiento. La documentación dice que si desea escribir texto literal en varias líneas, debe sangrar el texto con cada salto de línea..
cuerpo p | Slim es mi nuevo mejor amigo. Slim es mi nuevo mejor amigo.
Slim es mi nuevo mejor amigo. Slim es mi nuevo mejor amigo.
Si coloca el texto en la misma línea que el carácter de canalización, puede establecer el margen izquierdo después de la tubería más un solo espacio. Por curiosidad, jugué un poco con esto y encontré los siguientes resultados. Solo la última variación de ejemplo tiene un pequeño inconveniente obvio que debe tener en cuenta: se traga la primera palabra de la oración.
cuerpo p | Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así sucesivamente ... p | Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así sucesivamente ... p Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así sucesivamente ... p Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así sucesivamente ... p Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
Cómo la salida se representa en su marca HTML difiere un poco.
Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
la línea está en el margen izquierdo. La línea tendrá un espacio delante de ella.. La línea tendrá dos espacios delante.. pronto…
Por supuesto, es necesario comentar su código de vez en cuando. No olvide, sin embargo, que demasiados comentarios son también un olor. Solo trata de mantenerlo en un mínimo absoluto!
Una barra inclinada / es todo lo que necesitas para comentar cualquier código.
cuerpo / p | Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
¡Auge! Y ahora este párrafo se ha ido de la página. Este comentario no deja rastro en el marcado HTML final. Solo necesita aplicarlo al selector de padres y todos sus hijos también serán comentados. Así, incluso los comentarios son escasos y mínimos..
Si, por otro lado, quieres algún comentario HTML que aparece en la salida final procesada, solo necesita agregar un signo de exclamación ! después de la barra.
cuerpo /! p | Esta línea está en el margen izquierdo. Esta línea tendrá un espacio delante de ella. Esta línea tendrá dos espacios delante. Y así…
ordenado!
Hemos estado usando atajos todo el tiempo. Cuando escribes un punto . o un símbolo de hash # le dices a Slim que quieres usar atajos predefinidos para las clases y las identificaciones. Eso es ciertamente un valor predeterminado muy bueno, pero ¿qué puedes hacer para expandir eso y crear tus propios pequeños fragmentos? Podemos hacer esto para etiquetas y atributos por igual. Bienvenidos a la maravilla de Slim!
En Rails, solo necesitamos configurar un inicializador con el siguiente patrón:
Slim :: Engine.set_options atajo: 'c' => tag: 'container', '#' => attr: 'id', '.' => attr: 'clase'
En las aplicaciones de Sinatra, simplemente agregue la misma configuración en cualquier lugar debajo de la línea donde requiere 'delgado'.
Accentsconagua
requiere 'sinatra' requiere 'delgado' Slim :: Engine.set_options atajo: 'c' => etiqueta: 'contenedor', '#' => attr: 'id', '.' => attr: 'class' get ('/') slim: index __END__ @@ index doctype html html head title Slim Templates body h1 Boss Level Templates con SlimPuede configurar opciones en el Slim :: Engine proporcionando un hash con el acceso directo que necesita. En el ejemplo anterior, le indicamos a Slim que use do como un atajo para un envase etiqueta. Lo utilizarías así en tus archivos Slim:
c.content Ahora tiene una etiqueta contenedora con una clase .content.
Y el HTML renderizado se vería así, por supuesto:
Ahora tienes una etiqueta de contenedor con una clase .content.
Muy bonito, ¿eh? Pero no pensaste que ahí es donde se detiene la música, ¿verdad? Podemos llevarlo más allá de eso. Déjame darte un ejemplo que es un poco más complicado:
Slim :: Engine.set_options atajo: '#' => attr: 'id', '.' => attr: 'class', 'c' => tag: 'container', '&' => tag: 'input', attr: 'type', '@' => attr: 'role', '^' => attr:% w (rol de rol de datos)
En este ejemplo, no solo creé etiquetas personalizadas sino que también proporcioné atributos personalizados. Vamos a analizar este paso a paso. Por cierto, rompí el hash de opciones en varias líneas para mantenerlo legible y para evitar tener una larga línea de código con la que a nadie le gusta tropezar. Lee mucho mejor, ¿no crees??
A través del símbolo ampersand Y, Ahora podemos crear una etiqueta de entrada, y solo necesitamos alimentarla con un tipo, que sigue inmediatamente al signo. Podemos usar cualquier símbolo que tenga sentido usar; No hay necesidad de usar el mismo que yo hice. Sin embargo, tenga cuidado y trate de tomar decisiones inflexibles en ese departamento.
& text name = "usuario" & password name = "pw" & submit
Cuando realice cambios en este inicializador con sus accesos directos personalizados, no debe olvidar reiniciar su servidor local. Sin eso, sus cambios no se reflejarán durante el preprocesamiento.
A continuación, si necesito un papel atributo, ahora puedo simplemente prefijarlo con un @ símbolo.
.persona @ admin Daniel Mendler
Daniel Mendler
Actualización: el atributo de rol es un enfoque semántico para describir el rol del elemento en cuestión, si necesita determinar el propósito del elemento.
Ver, a través del punto obtenemos una clase = "persona" clase y la @administración nos dio un role = "admin". Muy práctico dandy, pero podemos ir un paso más allá y usar una matriz para especificar múltiples atributos que deberían crearse a través de un solo acceso directo.
.ingenioso hacker CrackDoctor
CrackDoctor
Porque asociamos una serie de atributos para nuestra ^ atajo, crea crea rol de datos y papel atributos simultáneamente a través de un solo símbolo. Eso puede ser bastante útil. Imagínese si desea generar un elemento similar al siguiente y puede hacerlo de manera concisa con un atajo y algún código Ruby.
Escribir todo esto a mano no parece ser el mejor uso de su tiempo; tenemos un código para hacer ese trabajo por nosotros. Bueno, ahí lo tienen, eso es todo lo que necesita saber para crear su propio conjunto de atajos increíbles, o para crear un gran lío cuando no practica un poco de restricción. Recomendaría no exagerar con esto, especialmente tratar de evitar definir accesos directos que usan símbolos a los que Slim ya está conectado.
Actualización: los atributos de datos se utilizan para tener algunos datos privados en su página o aplicación. Cosas que te ayudan a filtrar contenido, por ejemplo. Son atributos personalizados que se pueden utilizar en todos los elementos HTML. Usarlos para propósitos de JavaScript es otra práctica común. También es muy útil para probar elementos en una página si quiere asegurarse de que se muestren elementos particulares y evitar que los diseñadores se metan con sus estilos..
Antes de que te vayas, quería mostrarte un pequeño vistazo a las vastas opciones de configuración y cómo aplicarlas. Para Rails, crearías un archivo de entorno como config / environment / development.rb y especifique las opciones que necesita. Simplemente coloque su configuración en algún lugar dentro de la Rails.application.configure bloquear.
Rails.application.configure do Slim :: Engine.set_options default_tag: 'p', tabsize: 2, attr_list_delims: '(' => ')', '[' => ']', '' => ' ',' "'=>'" ',' ‹'=>'› ' FinEn esta configuración, me aseguré de que la etiqueta predeterminada que se crea si se omite un nombre de etiqueta es una etiqueta-no un div etiqueta, que es el ajuste estándar. Además, ajusté el tamaño de las pestañas para usar dos espacios en blanco y finalmente agregué dos delimitadores más para envolver los atributos de las etiquetas. Ahora puedo usar ‹› y "" tambien por eso No es terriblemente útil pero es bueno para propósitos de demostración..
En el siguiente ejemplo, puede ver que todos los delimitadores para envoltorios de atributos crean la misma salida, también que .alguna clase o # alguna identificación crea etiquetas por defecto.
body #zeroth a href = "http://slim-lang.com" title = "Página de inicio" Ir a la página de inicio .first a [href = "http://slim-lang.com" title = "Inicio página "] Ir a la página de inicio .segundo a (href =" http://slim-lang.com "title =" Página de inicio ") Ir a la página de inicio .third a‹ href = "http: // slim-lang. com "title =" Página de inicio "› Ir a la página de inicio. Cuarto a "href =" http://slim-lang.com "title =" Página de inicio "" Ir a la página de inicio
Ir a la página de inicio Ir a la página de inicio Ir a la página de inicio Ir a la página de inicio Ir a la página de inicio
Alternativamente, también puede configurar estas cosas en config / initializers / slim.rb como te mostré en la sección de atajos personalizados.
Para Sinatra, es el mismo ejercicio descrito en la sección de accesos directos. Solo establece tus opciones en algún lugar debajo de tu requiere 'delgado' declaración y eres bueno para ir.
Eche un vistazo a la documentación en "Opciones disponibles" para obtener más información acerca de lo que está disponible para la configuración. Slim te da muchas opciones para jugar..
Eso es básicamente eso. Hay uno o dos temas más avanzados en los que deberías profundizar si es necesario, pero pensé que en su mayoría no son para principiantes ni se usan mucho en el día a día. Quería mantener las cosas simples y mostrarte todo lo que necesitas para cambiar rápidamente a este increíble motor de plantillas. Diviértete, y espero que Slim sea ahora uno de tus nuevos juguetes favoritos.!
