Ember.js - Notice List Component (JavaScript)

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

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" date=aDate}}
</script>

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

  </ul>
      d
    {{input type="text" value=day}}
    m
    {{input type="text" value=month}}
    y
    {{input type="text" value=year}}
</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;
}

JavaScript

var App = Ember.Application.create();


App.IndexRoute = Ember.Route.extend({
  model: function() {
    return {
      myErrors:  [ "This is the first error", "This is the second error" ],
      hasErrors: false,
      aDate: new Date()
    };
  }
});


App.NoticeListComponent = Ember.Component.extend({
  tagName: 'div',

  attributBindings: [ 'class' ],

  classNameBindings: [ 'noticesTrigger::hidden' ],

  header:         "Notices",
  notices:        [],
  noticesTrigger: false,
  date: new Date(0),

  "class": null,
   month: Ember.computed('date', {
        get(key) {
            return this.get('date').getMonth();
        },
        set(key, value) {
            var newDate = new Date();
            newDate.setDate(this.get('day'));
            newDate.setMonth(value);
            newDate.setYear(this.get('year'));
            return value;
        }
    }),
     day: Ember.computed('date', {
        get(key) {
        
            return $this.get('date').getDate();
        },
        set(key, value) {
            var newDate = new Date();
            newDate.setDate(value);
            newDate.setMonth(this.get('month'));
            newDate.setYear(this.get('year'));
            return value;
        }
    }),
     year: Ember.computed('date', {
        get(key) {
            return $this.get('date').getFullYear();
        },
        set(key, value) {
            var newDate = new Date();
            newDate.setDate(this.get('day'));
            newDate.setMonth(this.get('month'));
            newDate.setYear(value);
            return value;
        }
    })
    
});