Ember-Data template

by Kiwiupover

HTML

<script src="https://raw.github.com/wycats/handlebars.js/1.0.0-rc.3/dist/handlebars.js"></script>
<script src="https://raw.github.com/emberjs/ember.js/release-builds/ember-1.0.0-rc.1.js"></script>
<script src="http://yourjavascript.com/3284411177/ember-data.js"></script>
<script src="https://raw.github.com/timrwood/moment/2.0.0/min/moment.min.js"></script>
<script type="text/x-handlebars">
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="events">
    <ul>
        {{#each event in controller}}
            <li>
                {{#linkTo events.edit event}}{{event.name}} {{event.prettyDate}} {{/linkTo}}
            </li>
        {{/each}}
    </ul>
    
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="events/edit">
   <h2>Edit</h2>
   {{view Ember.TextField 
           valueBinding="name"        
           placeholder="The Name"}}
    
     {{view App.DatePicker valueBinding="prettyDate" placeholder="Start Date" required="true" class="datepicker" }}
</script>

JavaScript

App = Ember.Application.create({
    Store: DS.Store.extend({
        revision: 11,
        adapter: DS.FixtureAdapter
    })
});

App.DatePicker = Ember.TextField.extend({
  tagName: "input",
  placeHolder: "Start Date",
  attributeBindings: ['data','value','format','readonly','type','size'],
  type: "text",
  format: 'DD, d MM, yy',

  value: function(){
    var date = this.get('data');

    if(date){
      return date.format(this.get('format'));
    }
    else{
      return "";
    }
  }.property('data'),

  didInsertElement: function(){
    var self = this;
    var onChangeDate = function(ev) {
       console.log($(".datepicker").attr("value"));
       self.set('data', ev.date);
    };
    this.$().datepicker({ dateFormat: this.get('format') }).on('changeDate', onChangeDate);
  }
});

App.Event = DS.Model.extend({
    name: DS.attr('name'),
    date: DS.attr('date'),
    
    prettyDate: function() {
        prettyDate =  moment(this.get('date'));
        return prettyDate.format('MMM Do');
    }.property('date')                     
});

App.Event.FIXTURES = [{
    id: 1,
    name: 'The Marsh',
    date: '2013-02-28 08:00:00'
}, {
    id: 2,
    name: '5th St',
    date: '2013-02-23 08:00:00'
}, {
    id: 3,
    name: 'East End',
    date: '2013-02-22 08:00:00'
}];
App.Router.map(function () {
    this.resource('events', function () {
        this.route('edit', {
            path: '/:event_id/edit'
        });
    });
});

App.IndexRoute = Ember.Route.extend({
    redirect: function () {
        this.transitionTo('events');
    }
});

App.EventsRoute = Ember.Route.extend({
    model: function () {
        return App.Event.find();
    }
});

App.EventsEditRoute = Ember.Route.extend({
    model: function (params) {
        return App.Event.find(params.event_id);
    },
    setupController: function (controller, model) {
        controller.set('content', model);
    }
});