CODEWITHSUNDEEP
ruby-on-railsangularjsslim-lang
Brennan Cheung
Brennan Cheung

Reputation: 4561

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

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?

Upvotes: 5

Views: 2281

Answers (5)

Tyler Collier
Tyler Collier

Reputation: 11988

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.

Upvotes: 6

ybian
ybian

Reputation: 103

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.

Upvotes: 1

Brennan Cheung
Brennan Cheung

Reputation: 4561

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'

Upvotes: 3

Shawn Balestracci
Shawn Balestracci

Reputation: 7540

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}}

Upvotes: 4

Brennan Cheung
Brennan Cheung

Reputation: 4561

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.

Upvotes: 0

Related Questions