{"id":201,"date":"2016-07-25T09:06:26","date_gmt":"2016-07-25T13:06:26","guid":{"rendered":"https:\/\/mberlove.com\/blog\/?p=201"},"modified":"2016-07-23T23:16:43","modified_gmt":"2016-07-24T03:16:43","slug":"3-tips-tricks-for-slim-ruby","status":"publish","type":"post","link":"https:\/\/mberlove.com\/blog\/3-tips-tricks-for-slim-ruby\/","title":{"rendered":"3 Tips & Tricks for Slim (Ruby)"},"content":{"rendered":"

For those coming to the Slim template engine from other tools, or from nothing at all in this area, getting acquainted with Slim can prove daunting — it did for me!<\/p>\n

 <\/p>\n

Fortunately, it’s the kind of syntactic methodology that succumbs quickly to a little hard and fast learning. Personally, I ran across a few “gotchas” that I want to share lest you run across them yourself. Knowing these beforehand will save you time, effort, and frustration.<\/p>\n

 <\/p>\n

Inline conditionals<\/h1>\n

Getting logic on the same line as an element can be tricky, especially if it’s more than one straightforward directive. For conditionals, you can employ the ternary operator. Here’s how to do that with Slim:<\/p>\n

.<\/span>item <\/span>class<\/span>=(<\/span>condition <\/span>?<\/span> 'outcome-1-class'<\/span> :<\/span> 'outcome-2-class'<\/span>)\r\n <\/span> .subitem\r\n<\/span><\/code><\/pre>\n
Obviously this method can be applied to more than just classes.<\/p>\n
See the original solution on StackOverflow<\/a>.<\/p>\n
HTML from a string<\/h1>\n
Slim allows you to embed plain HTML directly inside its own syntax. If your code is coming from an external source in the form of a string, however, it won’t render, due to Rails treating the string as potentially malicious, and escaped. You can avoid this simply by running it through html_safe, as:<\/p>\n
codeString.html_safe<\/pre>\n
Text inside a tag<\/h1>\n
Setting up the alignment of your content just right so that Slim recognizes your intent is no simple feat for the uninitiated. Placing nested or complex content in a link tag in particular gave me serious difficulty.<\/p>\n
The basic outline goes something like this:<\/p>\n
a href<\/span>=<\/span>\"location\"<\/span> span <\/span>class<\/span>=<\/span>\"item\"<\/span> |<\/span> Something to say<\/span> span <\/span>class<\/span>=<\/span>\"item-other\"\r\n | Something else to say\r\n<\/span><\/code><\/pre>\n
As usual, riff on this as you require.<\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
For those coming to the Slim template engine from other tools, or from nothing at all in this area, getting acquainted with Slim can prove daunting — it did for me!   Fortunately, it’s the kind of syntactic methodology that […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[125],"tags":[160,72,161,41,162,52],"class_list":["post-201","post","type-post","status-publish","format-standard","hentry","category-programming","tag-html","tag-ruby","tag-slim","tag-software-development","tag-templating","tag-tips-and-tricks"],"_links":{"self":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/201","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/comments?post=201"}],"version-history":[{"count":6,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions"}],"predecessor-version":[{"id":207,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/posts\/201\/revisions\/207"}],"wp:attachment":[{"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/media?parent=201"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/categories?post=201"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mberlove.com\/blog\/wp-json\/wp\/v2\/tags?post=201"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
See the original on StackOverflow<\/a>.<\/p>\n