Haml::SyntaxError: Invalid attribute list - ruby-on-rails

I am trying to interpolate a ruby variable in a HAML%img src tag, with the ruby interpolation operator #{}. In the following way:
-#locations.each do |location|
%li
%img(src: "#{location.thumbnail_url}")
However, I get the following error:
Invalid attribute list: "(src: \"\#{location.thumbnail_url}\")".
Is there a valid way to do this? I am sure it has been done before but can't see any literature/any other posts about it.

It looks like you’re mixing the two attribute styles, the normal style and the HTML style.
You want to either replace () with {} and use the normal style:
%img{src: "#{location.thumbnail_url}"}
or use the HTML style with = instead of :, like this:
%img(src = "#{location.thumbnail_url}")

Related

Rendering markdown with Slim/Rails from an instance var

I'm having trouble getting Slim to render my markdown:
div.container
div.row
div.col-md-8.job_description
markdown:
= #listing.job_description
That just renders the string
This is an h1 ## h2 ### h3 > this is a quote * hello * goodbye foo
No line breaks or anything (which are contained in the actual string)
How do I get this to render properly? Thanks!
I gave up on using markdown: in slim, had tried everything.
I ended up creating this helper, place it in just any file in app/helpers
def markdown(content)
return '' if content.blank?
markdown = Redcarpet::Markdown.new(Redcarpet::Render::XHTML, autolink: true, space_after_headers: true)
sanitize(markdown.render(content)).html_safe
end
And then in a view
= markdown #listing.job_description
You will of course have to install the redcarpet gem.
gem 'redcarpet'
Rendering Markdown out of a variable in this way isn't possible, as Slim first renders the Markdown (or any other embedded engine language) and only after that interpolates the variable contents.
It makes sense that it would work this way as Slim's embedded engine tags are intended as a way of including different languages in-line so you can read them there. If the markdown isn't included in literal form in the template, there's no advantage to using the embedded engine over simply rendering the Markdown before you pass it to Slim (as HTML, and using '==' to prevent further processing by Slim).
I think, also, that it's set up like this because it's intended to provide and easy way for interpolating text into Markdown - which doesn't itself have a means of interpolation - within the same template as everything else.
The helper Iceman suggests is a nice way to do it. I'd probably call it outside of the template, but that's just because it's my personal preference to do as little as possible inside the template.
Looks like your markdown content is not indented under markdown:, so it won't be processed by markdown.
It should look more like this:
div.col-md-8.job_description
markdown:
= #listing.job_description
See this section of the docs for more information.

Ruby hash syntax

I'm new to ruby and trying to get used to the new syntax.
This is a line of code from the project i'm in, it's a simple description on the footer
that shows the local company number, but the syntax of the second line is a little confusing to me.
%dt Indonesia
%dd{ itemprop: 'telephone' }= I18n.with_locale(:id) { t('meta.phone_number') }
so {itemprop: 'telephone'} is just a block that maps a symbol itemprop to the value 'telephone', but then why do you have "=" in between the I18n.with_locale(:id)? what does it do?
Also, is the third block {t('meta.phone_number')} a parameter for the I18n.with_locale(:id)?
or is I18n.with_locale(:id) even a method call?
I would appreciate any help. Thank you
%dd: tell Haml to emit a <dd> tag.
{ itemprop: 'telephone' }: tell Haml that the current tag should have an attribute itemprop with value telephone.
=: tell Haml to set the text content of the current tag to whatever Ruby says the rest of the line evaluates to.
I18n.with_locale(:id) { ... }: tell Ruby to invoke the method with_locale on I18n, with one parameter (the symbol :id) and a block.
t('meta.phone_number'): tell Ruby to invoke the t helper method, with one parameter (string meta.phone_number).
All in all, it should generate something like this:
<dd itemprop="telephone">電話番号</dd>
if 電話番号 was a translation registered for meta.phone_number and the current locale was Japanese.

In Tritium, how do I add an attribute with no value assigned to it?

I have a normal tag:
...
I need it to look like this:
<a href="prefetchThisPage.html" data-prefetch> ... </a>
Why? jQuery Mobile feature: http://jquerymobile.com/demos/1.1.1/docs/pages/page-cache.html
The expected way below does not add the attribute, probably because Tritium ignores empty attributes.
attribute("data-prefetch")
Any ideas?
Great Question!
The best way to do this, is to set the value of the variable to the NAME of the variable.
I would do it like this:
$variable_name = "data-prefetch"
$("./a") {
attribute($variable_name, $variable_name)
}
This is an HTML5 convention and should work for the purposes you illustrated!
Tritium currently has a short circuit that converts attribute assignments like the following declaration:
attribute("data-prefetch", "")
Into the equivalent of removing the attribute.
I strongly recommend you file this issue with Moovweb's help desk so that they add support for adding attributes with no values.

HAML - how to display the value of a variable?

I have a variabla var. If I try to output its value in HAML like =val then I just get the string value of the object which looks like this: #<ShortenedUrl:0x118c50fa.
But how do I get the value that is in there?
Using Haml
%h2
#{#project.name}
or
%h2
#{org.id}
I think you may want the .inspect method.
= val.inspect
That will show you something like:
#<ShortenedURL #url="the url", #count=0, #etc="etc">
Of course, if you want to dive in to specifics (for example, you only want to show someone the url attribute (or whatever attribute you may have), then use that method:
= val.url
Which will show:
the url

How can I get Haml to render the contents of a pre tag correctly?

I read the Haml docs where they talk about the pre tag and "preserving whitespace". According to the docs, pre "preserves whitespace" by default and you need to use the ~ operator to output the contents of the tag to get it to render correctly. Following the recommended practice, I have this:
%pre
~ #calendar.main_template
The output in the browser:
(This may be a little confusing -- the app is letting the user manipulate Haml code, so I'm actually displaying Haml code here in the UI.)
%div
= events
What output want:
%div
= events
I also tried using = instead of ~. Also tried %pre>, %pre<, and %pre>< all with identical results.
You want preserve.
%pre
= preserve "I like\n Cheese"

Resources