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>
<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 class="accordion-group">
    <div class = "accordion-heading">
      <a class = "accordion-toggle" data-parent = "#accordion2" data-toggle = "collapse" href = "#collapseOne">
        {{content.name}}
      </a>
    </div>  
    <div id = "collapseOne" class = "accordion-body collapse in">
      {{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}}
          </div>  
      </form> 
    </div> 
  {{/each}}
  </div>
</div>

<br>

<div class = "btn" {:_action => 'showstep3'}>  Next Step > </div>
</script>

JavaScript

App = Ember.Application.create();

App.SurveyContent = Ember.Object.extend({
  name: "",
  content_type: 1,
  content_pos: 1,
  hash: Em.A([]),

  types: function() {
    alert("redraw");
    return App.ContentTypes[this.content_type-1].hash;
  }.property()

});

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: [App.SurveyContent.create()],    //Pushing an instance of App.SurveyContent onto this

  contentsNameObserver: function() {
    context = this;
    console.log("entering");
    Em._suspendObserver(App.Surveys, "contents.lastObject.name", false, false, function() {
      console.log("suspend handler");
      context.contents.pushObject(App.SurveyContent.create());
    })
  }.observes("contents.lastObject.name")

});

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: 'Question', help: 'Enter the question here', type: 'text'}), 
                        Ember.Object.create({name: 'Answer', help: 'Enter possible answers here', type: 'text', multiple: true})]})
];

App.ViewTypeConvention = Ember.Mixin.create({
  viewType: function() {
    console.log(this);
    return Em.get("Ember.TextField");
  }.property().cacheable()
});


App.CRMData = Ember.Object.extend();

App.CRMData.reopenClass ({
  crm_data: [],
  org_data: [],
  org_display_data: [],

  loadData: function() {
    context = this;
    context.crm_data = [];
    $.getJSON ("ajax/crm_data", function(data) {
      data.forEach(function(crm) {
        context.crm_data.pushObject(App.CRMData.create({id: crm.crm_id, name: crm.crm_name}));
        crm.orgs.forEach(function(org) {
          context.org_data.pushObject(App.CRMData.create({id: org.org_id, name:...