Slim template interprets {{myJsVar}} as HTML attribute grouping

Question

I'm playing around with Angularjs and Slim but am trying to figure out how to come up with a cleaner syntax.

I want to do:

td {{content.name}}
td {{content.body}}
td {{content.owner}}

But it gives me an error. Most likely because { is used to group HTML attributes. I've had to change it to this:

td
  | {{content.name}}
td
  | {{content.body}}
td
  | {{content.owner}}

Is there a cleaner way to do this?

Have a look at [this answer](http://stackoverflow.com/a/13671817/586621). You can change the interpolation tags that AngularJS uses. — Jay, Jul 17 '13 at 01:42
Hmm, that would still be a problem because slim would treat it as: `` I think a better option would be to modify slim so that it didn't use `{` for html attribute grouping. — Brennan Cheung, Jul 19 '13 at 23:32

score 6 · Accepted Answer · answered Feb 21 '15 at 17:57

The change that allows this is in slim version 2.0.3.

You can add the following in config/initializers/slim.rb:

Slim::Engine.set_options :attr_list_delims => {'(' => ')', '[' => ']'}

This removes { from the defaults. See the doc here and search on the page for attr_list_delims.

score 4 · Answer 2 · answered Jul 20 '13 at 01:27

4

I'm not sure if you'd consider it cleaner but you can put all the attributes in parentheses.

td() {{content.name}}
td(otherattr=2 thisattr=3) {{content.body}}
td() {{content.owner}}

answered Jul 20 '13 at 01:27

Shawn Balestracci

7,380
1
34
52

score 3 · Answer 3 · answered Jul 29 '13 at 22:57

3

I ended up patching the Slim gem itself. Only 2 lines changed.

You can see it at https://github.com/brennancheung/slim/tree/angularjs_support

And can include it in your Rails project using:

gem 'slim', :git => 'git://github.com/brennancheung/slim.git', :branch => 'angularjs_support'

answered Jul 29 '13 at 22:57

Brennan Cheung

4,271
4
30
29

Thanks for doing this. I'm using PadrinoRB and BackboneJS and was running into the same "problem". I had it working the same way you did at first, but this is definitely much cleaner. – Marvin Alejandro Herrera Oct 21 '13 at 04:57
i worry about this not being maintained... with future iterations of slim – ahnbizcad Sep 14 '14 at 19:14
Do you mind sharing which lines were change in your answer? Thanks! – ahnbizcad Sep 14 '14 at 19:14
1

@gwho The change is simple but it took me some time to find. You can check the last commit in my fork to see the changes (https://github.com/brennancheung/slim/commit/53dec2403bde08b1959226212864f78015ce273f). I'm mostly using Node.js these days so I'm not planning on maintaining it but it should be pretty easy for anyone else to take over. I originally tried to add a config option, so that it would be easy to merge the pull request in without breaking compatibility, but it looked like a lot more work and would require some re-architecting. :( – Brennan Cheung Sep 15 '14 at 19:00
1

I'd suggest to update the answer since the fix was merged https://github.com/slim-template/slim/pull/434 . The config option is: `Slim::Engine.set_default_options :attr_delims => {'(' => ')', '[' => ']'}` – Vladimir Chervanev Dec 11 '14 at 05:55
Thanks @VladimirChervanev for pointing me in the right direction. I added a full answer with updated instructions. – Tyler Collier Feb 21 '15 at 17:58

score 1 · Answer 4 · answered Nov 01 '14 at 11:45

I know this is an old question, but there is a perfect solution now. The latest slim supports custom attr_delims options. I don't know when it was added, but v2.0.3 has that. With command line, you can use:

slimrb -o "attr_delims={'(' => ')', '[' => ']'}" <file>

Or if you use gulp-slim, you can write it like this:

.pipe(slim({
  pretty: true,
  options: "attr_delims={'(' => ')', '[' => ']'}"
}))

You can refer to the doc here.

score 0 · Answer 5 · answered Jul 19 '13 at 23:34

0

On other variant, but I'm still not happy with it, is to do:

td ng-bind="content.name"
td ng-bind="content.body"
td ng-bind="content.owner"

I'm leaning towards customizing slim so that it doesn't use { for grouping HTML attributes.

answered Jul 19 '13 at 23:34

Brennan Cheung

4,271
4
30
29

Slim template interprets {{myJsVar}} as HTML attribute grouping

5 Answers5