Emblem.js preview

HTML

<script src="https://s3.amazonaws.com/machty/emblem.min.js"></script>
<script src="https://s3.amazonaws.com/machty/ember.js"></script>
<script type="text/x-emblem" data-template-name="blorg">
  h1 I am a blorg.
</script>

<script type="text/x-emblem" data-template-name="application">
  h1 Holy {{App.foo}}!
  h2 What the {{App.foo}} is this {{App.foo}}?
  .no.way
    p I can't believe my eyes.
    p Auto-updating templates... but... not Handlebars?
  p#yes Bloooorg.
    
  App.BlorgView
  
  button disabled={true} aaa
   
  / Check out these comments.
    They don't even render!
</script>

CSS

.no {
    color: red;
}

.way {
    font-weight: bold;
}

#yes {
    color: blue;
}
#yes span {
    font-size: 20px;
    color: red;
}

JavaScript

App = Ember.Application.create({
    foo: "#$&@",
    items: [ 1,2,3 ]
});

var borf = ['#', '&', '%', '$', '*', '@'];
setInterval(function() {
    Em.run(function() {
        var s = "";
        s += borf[Math.floor(Math.random() * borf.length)];
        s += borf[Math.floor(Math.random() * borf.length)];
        s += borf[Math.floor(Math.random() * borf.length)];
        s += borf[Math.floor(Math.random() * borf.length)];
        App.set('foo', s);
    });
}, 300);

App.BlorgView = Em.View.extend({
    templateName: "blorg"
});