Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
  <head>
  <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
  <script src="http://builds.handlebarsjs.com.s3.amazonaws.com/handlebars-v1.3.0.js"></script>
  <script src="http://s3.amazonaws.com/machty/to_s3_uploads/emblem-fabff6e6-2f87-948a-57ca-b8fb64252876.js"></script>
  <script src="http://builds.emberjs.com/ember-latest.js"></script>
  
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
 
<script type="text/x-emblem" data-template-name="application">
  
  h1 Emblem.js
  h2 Indented Handlebars.js
  
  h4 Features
  ul
    li Indentation-based syntax (closest to Slim)
    li Compiles to Handlebars, full compatibility 
       with Ember.js auto-updating bindings
    li Drop-in replacement for <code>handlebars.js</code> 
       while building/developing, requires only 
       <code>handlebars-runtime.js</code> in production.
      
  h3 Syntax Examples
      
  h4 CSS-based class/id shorthand, Indentation for nested HTML / block helpers
      
  .wrapper
    p#an-id.class1.class2 Here be words.
      
    h5 The each helper in action.
      
    ul
      each App.things
        li = name
      
    p Notice how you can start a line with either 
      HTML or a Handlebars helper, and Emblem 
      handles each one differently: this works because 
      Emblem is aware of standard HTML tag names, so if 
      a line starts off with an HTML tag, it will insert 
      HTML, else it will assume that you're doing 
      a helper invocation or property lookup.
      
  h4 class=App.isOn Class bindAttr shorthand (omit the quotes)
  
  pre h4 class=App.isOn Class bindAttr shorthand (omit the quotes)
  
  h4 Capitalized line-starts treated as view invocations
  
  p Here is some text 
  
  App.BlobView
    p I'm inside a blob view!
  
  h4 Action shorthand
                                              
  p Emblem is also aware of Ember's mouse/key event names
                                              
  p
    button click="doIt target='App'" Click me
    |  or mouse over this guy -> 
    span mouseEnter="doIt target='App'" X
  
  
  h4 Various ways to mustache
  
  h5 Line-starting non-HTML
  
  p
    each App.things
      span HTML inside of <code>#each</code>, 
    
  h5 Via equal sign '='
  
  p
    = each App.things
      span This works too, 
        
  p Note that in the (generally avoidable) case that you have 
    a helper with the same name an HTML tag, you can force 
    Emblem to treat it as a mustache invocation by preceding 
    it with an equal sign. 
  
  h5 HTML followed by equal sign
  
  p = each App.things
    = dashify name
  
  h4 Force HTML, HAML-style (%)
  
  %borf This isn't a valid HTML element, but with % you 
        can force it to render as HTML instead of as a mustache.
    
  h4 If/else
  
  p 
    | Nothing special here
    if App.isOn
      | !!!
    else
      | ???
    
  h4 Explicit mustache / HTML
  
  p You can put all sorts of stuff in a block of text, 
    such as <code>{{App.curse}}, {{{App.curse}}}, and #{App.curse}</code>
  p Use these when there's 
    not always a sexy indented alternative.
  
  h4 Text lines
  
  p Sometimes you need to start a line with text, without
    it being wrapped in HTML or some block helper. 
  p 
    | In these cases, start the line with '|'. 
      You can use multiple lines too.
  
  h4 In-tag mustaches
  
  p Here's what to do when you need to hand-roll 
    bindAttr or action within an HTML tag:
  
  button{action doIt target="App"} Click me
  
  h4 Static HTML attributes
  
  p id="woot" class="soot boot" data-blurg="Woot" Inspect me. 
  
  h4 Comments
     
  pre / Anything after a line-starting slash won't be rendered (see the code)
  
  / Like all of this stuff that I'm writing here. 
    It can be multiline too. Woot woot.
    
  
       
</script>
  
    
<script type="text/x-emblem" data-template-name="thing">
  
  h3 Congrats, {{name}}, you added a thing.
  h4 Check out all the things you can do.
      
      
      
</script>
  
    
​
​
</body>
</html>
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
machtypro
0viewers