liloka liloka - 4 months ago 12
CSS Question

Reusable slim with parameters?

I have a date partial as follows, which is hardcoded at the moment:

#postdate
.grid
.grid__cell.day 15th
.grid__cell.month Jan
.grid__cell.year 2015


However, is there a way to make this reusable by making the date dynamic so that I can pass in the date from another slim file?

I'm not sure how to go about this since you render the partial just by adding
== slim :'components/_date'
. Is there a better way of doing this sort of thing altogether?

I'm using Ruby with sass and sinatra.

Thanks!

Answer

...is there a way to make this reusable by making the date dynamic so that I can pass in the date...

In a sinatra route, you can set variables, which are accessible in your slim templates:

routes.rb:

require 'sinatra'
require 'slim'

get '/' do
  @day = 170000   #****HERE****
  slim :index
end

views/index.slim:

h2 This is views/index.slim:

div The day is: #{@day}  #****HERE****

ul.fruit
  li Apples
  li Oranges


== slim :'components/_date'

views/components/_date.slim:

#postdate
  .grid
    .grid__cell.day  =@day  #****HERE*****
    .grid__cell.month Jan
    .grid__cell.year 2015

I don't really understand what you mean by:

pass in the date from another slim file

Can you provide an example of what you want to do?

Response to comment:

According to the Sinatra faq, How do I render partials?, if you want to render a partial and specify local variables for the partial, you need to install a gem:

$ gem install sinatra-partial

Here is an example app:

~/sinatra_projects$ tree slim_app/

slim_app/
├── models
├── public
│   ├── cool_stuff.html
│   └── imgs
├── routes.rb
└── views
    ├── components
    │   └── _date.slim
    ├── index.slim
    └── layout.slim

routes.rb:

require 'sinatra'
require 'slim'

#***NEW STUFF:
require 'sinatra/partial' 
set :partial_template_engine, :slim  
enable :partial_underscores

get '/' do
  slim :index
end

views/components/index.slim:

h2 This is views/index.slim:

ul.fruit
  li Apples
  li Oranges


== partial\
  :'components/date', 
  locals: {day: 1, month: 'Jan', year: 2015}

== partial\
  :'components/date', 
  locals: {day: 25, month: 'Dec', year: 2014}

If you are using various kinds of templates, erb, haml, slim, etc., you can set the type when you call partial():

partial(:"components/date", :template_engine => :slim, :locals => {...})

views/components/_date.slim:

#postdate
  .grid
    .grid__cell.day  =day
    .grid__cell.month =month
    .grid__cell.year =year 

views/layout.slim:

doctype html 
html
  head 
    meta charset="utf-8"
    title Test
  body 
    h1 This is the Layout.  Find me in /views/app_layout.slim
    == yield 

So, I assume you want to do something like this:

routes.rb:

get '/' do

  @dates = [
    {day: 1, month: 'Jan', year: 2015},
    {day: 2, month: 'Feb', year: 2015},
    {day: 3, month: 'Mar', year: 2015},
    {day: 4, month: 'Apr', year: 2015},
  ]

  slim :index

end

views/index.slim:

h2 This is views/index.slim:

ul.fruit
  li Apples
  li Oranges

- @dates.each do |date|
  == partial\
    :'components/date', 
    locals: {day: date[:day], month: date[:month], year: date[:year]}

views/components/_date.slim:

#postdate
  .grid
    .grid__cell.day  =day
    .grid__cell.month =month
    .grid__cell.year =year 

...which produces:

This is the Layout. Find me in /views/app_layout.slim

This is views/index.slim:

  • Apples
  • Oranges

1
Jan
2015
2
Feb
2015
3
Mar
2015
4
Apr
2015