machty / emblem.js

Emblem.js - Ember-friendly, indented syntax alternative for Handlebars.js
http://emblemjs.com
MIT License
1.04k stars 81 forks source link

Multiline tag definitions #237

Closed thedeeno closed 9 years ago

thedeeno commented 9 years ago

In WebComponent land we often have to pass many attributes to our components. In native html it ends up looking like this:

<my-custom-element
  id="foo"
  class="bar"
  cat="{{ dog }}"
  on-bark="{{ run }}"
>
  <p>content</p>
</my-cusomt-element>

I don't see an easy way to do this with emblem, but I think this approach would look nice:

my-custom-element#foo.bar {
  cat="{{ dog }}"
  on-bark="{{ run }}"
}
  %p content

Thoughts? Is there a way to do multiline tags already?

coladarci commented 9 years ago

you seem to be mixing a lot of things together.. you mention components but your use of #foo.bar is specifically for elements, not for components. Then you add {{ }} which is handlebars inside emblem..

Having said all of that, it's possible:

your-component[
  foo='bar'
  biz=bang
  ]
thedeeno commented 9 years ago

Web components as in the html-custom-elements-spec, not ember components. Basically using something like polymer-elements within my ember app. The syntax shown there is exactly what I'm looking for though! Thanks.