EmberJS – ongoing – part 2

Your app depends on an API or some data source to generate dynamic tabs using bootstrap.

I had no idea how to simply print href=”#National” , ¬†the string national is part of an object that is in some array.

In Angular you’d be using ng-repeat and then templating¬†output: href=”{{item.name}}” : BOOM

EmberJS and emblem solution:


each g in geographySelection
li class=”
a href=”##{unbound g.name}” click=”selectGeo g.data” data-toggle=”tab” #{unbound g.name}



  1. If you won’t use unbound keyword, a bunch of script tags will be generated and you don’t want that!
  2. Click is a special tag for emblem (aka slim for ember) that converts to an observed listener for onClick events , EmberJS will propagate event through its cycle. Each event has a unique id and if you open Developer Console, you can inspect it as properties.
  3. Unbound will allow you to use property as string.

Share This: