Ember.js 0.9.3 template

by reubenposthuma

HTML

<script src="https://raw.github.com/lukemelia/jquery-ui-ember/master/js/libs/jquery-ui-1.9pre.js"></script>
<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.rc.1.js"></script>
<script src="http://cloud.github.com/downloads/emberjs/ember.js/ember-1.0.0-pre.2.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css">
<script  type="text/x-handlebars" data-template-name="app"> 
    {{outlet}}
</script>

<script  type="text/x-handlebars" data-template-name="templates/step3"> 
<h1> Add content to {{App.Surveys.name}} </h1>
<br>
    
    
<div id = "accordion2" class = "accordion">
  {{#each content in App.Surveys.contents}}
    <div {{bindAttr id="content.id2"}}>
  <div class="accordion-group">
    <div class = "accordion-heading">
      <a class = "accordion-toggle" data-parent = "#accordion2" data-toggle = "collapse" href = "#collapseOne" {{bindAttr href="content.idhref"}}>
        {{content.name}}
      </a>
    </div>  
    <div id = "collapseOne" class = "accordion-body collapse in" {{bindAttr id="content.id"}}>
      {{view Ember.TextField valueBinding="content.name" class="txtName"}}
      <form class = "form-horizontal">
        <div class = "accordion-inner">
          <div class = "control-group">
            <label class = "control-label" for ="organisation"> 
              Content Type
              <div class = "controls">
                {{view Ember.Select contentBinding="App.ContentTypes" optionValuePath="content.id" optionLabelPath="content.name" valueBinding="content.content_type"}}
              </div>  
            </div>  
          </div>  
          {{#each item in content.types }}
          <div class = "control-group" >
            <label class = "control-label" for = "organisation">
              {{item.name}}
              <div class = "controls">
                {{view item.viewType }}
              </div>  
          {{/each}}
    ...

CSS

.accordion {

  .accordion-heading {
    background-color: #e3e3e3;
    padding: 8px;
    .accordion-toggle {
      line-height: 30px;
      padding: 0px;
      font-size: 20px;
      text-decoration: none;
    }
  }

}

JavaScript

//Testing this out
$.fn.extend({
  safeClone: function() {
    var clone = this;
    prev = clone.prev();
    clone = prev.add(clone);
    clone = clone.add(clone.next());
    
    clone = $(clone).clone();
    console.log(clone);
    return clone;
  }
});

content_id_counter = 0;

App = Ember.Application.create();

App.Surveys = Ember.Object.create({
  name: null,
  start: $.datepicker.formatDate('mm/dd/yy' , new Date()),
  end: $.datepicker.formatDate('mm/dd/yy' , new Date()),
  themeID: 0,
  contents: [],    //Pushing an instance of App.SurveyContent onto this
  contentsNameObserver: function() {
    context = this;
    if(this.get('contents.lastObject').name) {
      context.contents.pushObject(App.SurveyContent.create());  
    }
  }.observes("contents.lastObject.name"),

  moveItem: function(fromIndex, toIndex){
    console.log(fromIndex, toIndex);
    var items = this.get('contents');
    item = items.objectAt(fromIndex);
    //items.removeAt(fromIndex);
    //items.insertAt(toIndex, item);
  },
});

App.SurveyContent = Ember.Object.extend({
  init: function() {
    this.set('id', 'content'+content_id_counter);
    this.set('idhref', '#content'+content_id_counter);
    this.set('id2', 'outer_content'+content_id_counter);
    content_id_counter++;
  },
  name: "",
  content_type: 1,
  content_pos: function() {
    return Ember.get('App.Surveys.contents').indexOf(this) + 1;
  }.property(),

  hash: Em.A([]),

  types: function() {
    return App.ContentTypes.findProperty('id', this.content_type).hash;
  }.property(),

  delete: function(event) {
    if(App.Surveys.contents.length > 1)
      App.Surveys.contents.removeObject(this)
  }

});


App.ContentTypes = [
  Ember.Object.create({name: 'Text question', id:1, hash: [Ember.Object.create({name: 'Question', help: 'Enter the question here', type: 'text'})]}),

  Ember.Object.create({name: 'Multichoice question', id:2, hash: [Ember.Object.create({name: 'Multichoice Question', help: 'Enter the question here',...