machty / emblem-site

Homepage for emblemjs.com

Emblem.JS Website

This is the website docs that power http://emblemjs.com. For the emblem.js src code go to github.com/machty/emblem.js.

Forks and contributions to the docs greatly appreciated!

Setup

This is a basic Ember-CLI app. To run in development, simply:

yarn install
ember s

Site Structure

Site docs are stored in app/docs as POJO's. There are some common keys that will affect how the document is rendered:

• title: appears at the top of the section
• docs: appears at the left of the section (Markdown syntax supported)
• emblem: will appear on the right with an emblem/handlebars tool
• shell: will render the code on the right as plain code
• instructions: will render on the right as Markdown

The syntax highlighting is accomplished through PrismJS. The site currently uses the handlebars prebuilt markup, as well as a semi-custom markup for Emblem. This can be customized in app/lib/emblem

emblem-site's Issues

No docs on how to properly use view syntax/support view blocks

Ember 1.8 changed how view helpers work, and broke some things. See: machty/emblem.js#178 and http://emberjs.com/guides/views/handling-events/ for some details.

The syntax that gets these block views to work is:

= 'my-lowercase-view-name-with-dashes' whatever='param'
    | Whatever text or HTML you want here gets wrapped by the view's element

If this can be added to the specs, or replace the current view helper documentation then that'd help a lot. Had to do some googling to figure this one out :)

Should also have some info on how to call the ember built in views - I think the syntax currently supported is deprecated, though there may be work-arounds (?)

Angle-bracket components

This do not work
% my-component @value=fooValue

This works
%MyComponent @value=fooValue

Syntax Compile Error with Else and Comment

When I have an if / else statement or an each / else statement on a template and write a single line comment I get a syntax compiling error.

How can I pass values to an ember component using emblem syntax?

Hi, I'm building an emberjs/rails app and while working in my template, I've created a component and am trying to pass data to it like this:
= component-name model=name

This throws an error
Uncaught Error: <(subclass of Ember._MetamorphView):ember640> Handlebars error: Could not find property 'component-name' on object SBD.NotesController:ember643.

I've tried every permutation with/without quotes... any help is appreciated!

Thanks,

HTML Attributes typo

Under HTML Attributes in the syntax,

the code says

button.close data-dismiss="modal" x

It compiles to

<button class="close" data-dismiss="dropdown">x</button>

Should modal in the emblem.js code be dropdown?

explicit line wrap?

Views and component invocations with parameters can result in very long lines. Would it be possible to include a "wrap" escape (such as "" at line-end)?

emblem.js and each as blocks

Howdy, I was having a problem converting some Handlebars syntax to Emblem. I've just starting using Emblem so I'm sure it's simple, but it was not shown how this could be done in Emblem on the site:

{{#each model as |feeditem|}} <h4>{{feeditem.title}}</h4> <h5>{{feeditem.text}}</h5> {{/each}}

Is there something I'm missing? Neither the Handlebars nor the Emblem work if I do an each in, so I'm quite puzzled.

Installation: Mimosa

I added support for Emblem compilation to Mimosa over the weekend. Both vanilla Emblem and via Ember. Worth mentioning in the Installation stuff? Happy to whip up a pull request if you are game. I 100% understand if you want to keep the list to the heavy hitters.

Wrapping properties into multiple lines

It's not included on emblemjs.com, so I've looked into the test specs, and I've found that it is possible to wrap properties into more lines with the use of brackets. I guess this should be mentioned in the Syntax docs.

Also it doesn't seem to work properly with Ember helpers, for example with Ember.Select
Static attributes are good (class="something"), however attribute bindings doesn't seem to work either in the form of value=something or valueBinding="something".
This is what I tried:

Ember.Select [
  content=something
  optionValuePath="content.value"
  optionLabelPath="content.label"
  value=somethingValue
  class="something" ]

emblem.js plz help: inline markup

This is a sample template fragment from Ember.js tutorial:

  <div class="right tomster"></div>
  <h2>Contact Us</h2>
  <p>Super Rentals Representatives would love to help you<br>choose a destination or answer
    any questions you may have.</p>
  <p>
    Super Rentals HQ
    <address>
      1212 Test Address Avenue<br>
      Testington, OR 97233
    </address>
    <a href="tel:[phone]">[phone]</a><br>
    <a href="mailto:[email protected]">[email protected]</a>
  </p>

How can I do those <br> and <address> with Emblem.js?

handlebars helper in element attribute

I'm trying to convert this handlebars fragment (and similar) to Emblem

<button class='btn btn-default' {{action 'sendUpdate' model}}
    data-toggle="tooltip" 
    title={{ _ "Update the software to the latest version." }} >
    {{ _ "Update" }}
</button>

The _ is a handlebars helper that does localization. The handlebars button template works fine.

but I can't seem to get the syntax correct for the Emblem template. I'm trying this:

button.btn.btn-default{action "sendUpdate" model} data-toggle="tooltip" title={ _ "Update the software to the latest version." }
      _ "Update"

    <button {{action "sendUpdate" model}} data-toggle="tooltip" class="btn btn-default">
      title=
       _ "Update the display software to the latest version." 
       _ "Update"  
    </button>

Any pointers?

Thanks.

Mistake on the home page code example?

On the third paragraph of the emblem examples on the home page of emblemjs.com, the line

each person

seems to be a mistake. I think it should be simply each.

splitting long lines

I would like to put a renderer call such as:

{{vertical-bar-chart
    maxBarThickness=maxBarThickness
    selectedSeedColor=selectedSeedColor
    data=data
    maxLabelHeight=maxLabelHeight
    withinGroupPadding=withinGroupPadding
    betweenGroupPadding=betweenGroupPadding
    stackBars=stackBars
 }}

into emblem. Is there any way to break long lines? If not a "" at the end of lines (as in python) might be an excellent addition. If so, then it would be great if the documentation had instructions.

mixing static and property css class on an element not in docs

I was quite confused trying to find out how to do this in the docs:

div.content class="#{view.active}"

as in http://emberjs.com/guides/templates/binding-element-class-names/#toc_static-classes

using :content did not work as in handlebars, and the class examples only show the ternary form, not the on/off form of class binding.

Dynamically add/remove an attribute

I'm struggling to dynamically add/remove the disabled attribute of a form button with emblem 0.9.0 and emberjs 2.12.1:

button#the-id.a-class{action 'myAction'} disabled="{{v-get model 'isInvalid'}}" Submit

where the call of v-get model 'isInvalid' returns either true or false.

If this is rendered, the button is always disabled because the attribute disabled does have a value. Is there a way to fix this using emblem? I could not find an answer on the syntax page.

Document multiline attribute syntax

Document this syntax:

= component [
  'my-component'
  my-attr=myValue
  ]

emblem.js docs error in syntax highlighting for multiline comment

The color highlighting for the multiline comment at http://emblemjs.com/syntax/ is broken. The second line is highlighted as if it were not a comment.

Enhance documentation for compiling emblem templates

see http://stackoverflow.com/questions/16556945/compiling-emblem-js-without-ember