Test input-date Helper

Basics for running tests : Ember, Ember-Data, Bootstrap

by Emmanuel Mie

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.3.1/ember.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.0.0-beta.6/ember-data.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.5.1/moment.min.js"></script>
<script type="text/x-handlebars" name="application">
<div class="container">
  <div class="panel panel-primary">
    <div class="panel-heading">
      <div class="panel-title">
Test Ember stuff !
      </div>
    </div>

    <div class="panel-body">
      <form class="form-horizontal">
{{#each dates}}
        <div class="form-group">
          <div class="col-sm-4">{{this}}</div>
          <div class="col-sm-8">
            {{input-date 'YYYY-MM-DD' this}}
          </div>
        </div>
{{/each}}
      </form>
    </div>
    
    <div class="panel-footer">
        If I set a date, the bound value is not updated...
    </div>
  </div>
</div>
</script>

CSS

body {
    padding-top: 50px;
}

JavaScript

App = Ember.Application.create();

App.ApplicationController = Em.Controller.extend({
    dates: [],
    
    init: function() {
        var r, o = [];
        for (i=1; i < 5; i++) {
            r = Math.floor((Math.random()*1000000000)+1) * i;
            this.get('dates').push(moment.unix(r).toISOString());
        }
        console.log(this.get('dates'));
    }
});

Ember.Handlebars.registerBoundHelper('input-date', function(format, timestamp) {
  var date = moment(timestamp).format(format);
  console.log(moment(timestamp).format(format));
  return new Ember.Handlebars.SafeString('<input type="date" value="' + date + '" class="form-control" />');
});