Search code examples
slim-langractivejs

How can I get Ractive.js to cooperate with Slim templates?

The Ractive tutorial uses this:

<th class='sortable {{ sortColumn === "name" ? "sorted" : "" }}'
    on-tap='sort:name'>
  Superhero name
</th>

The project I am working on uses Slim. Using html2slim, I am provided with this syntax:

th.sortable.sortColumn.: class=("{{ === \"name\" ? \"sorted\" \"\" }}") on-tap="sort:name"
    Superhero name

I don't know if that is valid Slim syntax; I cannot find anything in the Slim documentation to guide me. So I'm lost as to how this should be formatted in Slim, to render properly for Ractive.

The above syntax results in:

syntax error, unexpected tIDENTIFIER, expecting keyword_end

I have searched for gems, SO answers, and broad Googling but cannot find any clues. Has anyone here successfully done something like this?

Solution

  • In slim, use a double equal == to disable escaping in the attribute, see https://github.com/slim-template/slim#quoted-attributes

    I believe you can also mix ' and "" to avoid back-slashing, and I think you need to include the data ref in the mustache. The : inline a child element, so you don't want that either. Lastly, I'm not sure you can mix .classname notation with an explicit attribute. So I think it ends up being:

    th class=="sortable {{ sortColumn === 'name' ? 'sorted' : '' }}" on-tap="sort:name"
    Superhero name