Ember.js - Notice List Component (CoffeeScript)

A simple ember.js custom component that displays a custom formatted list of notices when a specified "trigger" evaluates to true. (CoffeeScript Version)

by Brandon

HTML

<link rel="stylesheet" href="http://necolas.github.io/normalize.css/3.0.0/normalize.css">
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.2.1/handlebars.min.js"></script>
<script src="http://builds.emberjs.com.s3.amazonaws.com/tags/v1.4.0/ember.min.js"></script>
<script type="text/x-handlebars" id="index">
  <h2>Ember.js - Notice List Component</h2>
  {{input type="checkbox" checked=hasErrors}} Show Notices
  {{notice-list class="error-notice" notices=myErrors noticesTrigger=hasErrors header="Errors occurred"}}
</script>

<script type="text/x-handlebars" id="components/notice-list">
  <h2>{{header}}</h2>
  <ul>
    {{#each notice in notices}}
      <li>{{notice}}</li>
    {{/each}}
  </ul>
</script>

SCSS

.error-notice {
  margin-bottom: 20px;

  h2 {
    display: inline-block;
    text-shadow: 0 1px 2px rgba(0,0,0,.3);
    padding: 6px 11px;
    color: #fff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #cc0000;
    text-transform: uppercase;
    margin-right: 10px;
  }

  ul {
    color: #cc0000;
    padding: 10px 0;
    list-style-type: square;
    margin-left: 20px;
    line-height: 20px;
  }
}


.hidden {
  display: none !important;
}


body {
    margin: 20px;
}

CoffeeScript

App = Ember.Application.create()


App.IndexRoute = Ember.Route.extend
  model: ->
    {
      myErrors: [ "This is the first error", "This is the second error" ]
      hasErrors: false
    }


App.NoticeListComponent = Ember.Component.extend
  tagName: 'div'

  attributBindings: [ 'class' ]

  classNameBindings: [ 'noticesTrigger::hidden' ]

  header:          "Notices"
  notices:         []
  noticesTrigger:  false

  class: null