SUPER DAD

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/bootstrap.css">
<link rel="stylesheet" href="http://designmodo.github.com/Flat-UI/css/flat-ui.css">
<script type="text/x-handlebars">
  <div class="section-container">
    <pre>current: {{currentSection.id}}</pre>
    {{each controller itemViewClass="App.SectionView"}}
  </div>
    
</script>

<script id="section" type="text/x-handlebars">
      <div class="header">
          <div class="do-you">Do you want to be?</div>
          <div class="launching-soon">Launching 2013</div>
          <a class="logo btn btn-block">Super Dad</a>
      </div>
      <div class="question">
          <p class="prompt">{{prompt}}</p>
          {{#each choice in choices}}
            <a {{action save choice}} class="btn response btn-block">{{choice.text}}</a>
          {{/each}}
      </div>
    <hr/>

</script>

CSS

.section-container {
    width: 300px;
    margin: 0 auto;
    padding: 20px 20px;
    margin-top: 20px;
    text-align: center;
}

.section {
    margin-top: 20px;
}

.do-you {
  display: none;
}

.start .do-you {
  display: block;
  margin-bottom: 20px;
  font-size: 21px;
  font-weight: 200;
  line-height: 30px;
}

.start .launching-soon {
  display: none;
}

.launching-soon {
  text-transform: uppercase;
}


.logo {
    line-height: 40px;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: bold;
    padding: 8px 0;
    margin-top: 10px;
}

.prompt {
    margin-top: 50px;
    margin-bottom: 20px;
    font-size: 21px;
    font-weight: 200;
    line-height: 30px;
}

.response {
    text-transform: uppercase;
    font-size: 20px;
    line-height: 26px;
    padding: 8px;
    margin: 10px 0px;
}

JavaScript

App = Ember.Application.create({});

App.SECTIONS = [ {
  id: "start",
  doYou: "true",
  choices: [{value: 'yes', text: "Yes"}, {value: 'no', text: "No", next: "bye"}]

}, {
  id: "testing",
  prompt: "Do you enjoy testing products before they are ready for public use?", 
    choices: [{value: 'yes', text: "Yes"}, {value: 'no', text: "No", next: "bye"}]
}, {
  id: "time-over-money",
  prompt: "Do you value time over money",
    choices: [{value: 'yes', text: "Yes"}, {value: 'no', text: "No", next: "bye"}]
}, {
  id: "more-time",
  prompt: "Do you wish you had more time to do what you love?",
  choices: [{value: 'yes', text: "Yes"}, {value: 'no', text: "No", next: "bye"}]

}];

App.Section = Ember.Object.extend({});

App.ApplicationController = Ember.ArrayController.extend({
  itemController: 'section',
  currentSection: function() {
    console.log('section or answer changed, setting current');
    console.log(this.get('content.length'));
    return this.findProperty('unAnswered');
  }.property('[email protected]')
});

App.SectionController = Ember.ObjectController.extend({
  needs: ['application'],
  isCurrent: function() {
    var thisId = this.get('id');
    var currentId = this.get('controllers.application.currentSection.id');
    var result = thisId === currentId;
    console.log('isCurrent?', thisId, currentId, result);
    return result;
  }.property('controllers.application.currentSection.id'),
  unAnswered: function() {
    return Ember.isEmpty(this.get('answer'));
  }.property('answer'),
  save: function(event, context) {
    console.log('DOWN HERE', event.value);
    this.set('answer', event.value);
    console.log(this.get('content').toString(), this.get('content'))
  }
})

App.SectionView = Ember.View.extend({
    templateName: 'section',
    classNameBindings: ['controller.id', 'isHidden:hidden'],
    isHidden: true,
    didInsertElement: function() {
      console.log('inserted: ', this.toString());
      this.animate();
     ...