JSFiddle - React, Tailwind, and code Playground

by ud3323

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-latest.min.js"></script>
<script type="text/x-handlebars">
        {{view Ember.Select 
            contentBinding = "ET.appYearController.content" 
            selectionBinding="ET.selectedAppYearController.appYear"
            optionLabelPath="content.text"
            optionValuePath="content.value"
        }}
        <p>{{ET.selectedAppYearController.appYear.text}}</p>

       {{view Ember.Select 
            contentBinding = "ET.emailTypesController.content" 
            selectionBinding="ET.selectedEmailTypesController.emailType"
            optionLabelPath="content.descr"
            optionValuePath="content.email_template_type_id"
        }}
        <p>{{ET.selectedEmailTypesController.emailType.email_template_type_id}}</p>

          <table>
              {{#each ET.emailsController.content}}
                {{#view ET.emailView tagName = "tr" contentBinding ="this"}}
                    {{#with content}}
                  
                  <td>{{email_template_title}}</td>
                  <td>{{email_template_id}}</td>
                  <td>{{email_template_content}}</td>
                  <td>
                <a href="#" class="nice tiny radius blue button">Edit</a>
                <a href="#" class="nice tiny radius red button">Delete</a>
                  </td>
                  
                  {{/with}}
                  {{/view}}
              {{/each}}
          </table>
            
    </script>

JavaScript

ET = Ember.Application.create();
ET.AppYear = Ember.Object.extend();
ET.EmailTypes = Ember.Object.extend();

ET.appYearController = Ember.ArrayController.create({
    content: [],
    loadYears: function(year) {
        if (year != null) {
            for (var i = -5; i < 5; i++) {
                this.pushObject({
                    text: year + i,
                    value: year + i
                });
            }
        }
    }
});

ET.selectedAppYearController = Ember.Object.create({
    appYear: null,
    isChanged: function() {
        if (this.appYear != null) {
            onSuccess(this.appYear.text, ET.selectedEmailTypesController.emailType.email_template_type_id);
        }
    }.observes('appYear')
});

ET.emailTypesController = Ember.ArrayController.create({
    content: [],
    loadTypes: function(types) {
        if (this.get('content')) {
            //alert(this.get('content'));
        }
        for (i = 0; i < types.length; i++) {
            this.pushObject(types[i]);
        }
    }
});

ET.emailsController = Ember.ArrayController.create({
    content: [],
    loadEmails: function(emails) {
        for (i = 0; i < emails.length; i++) {
            this.pushObject(emails[i]);
        }
    }
});

ET.selectedEmailTypesController = Ember.Object.create({
    emailType: null,
    isChanged: function() {
        if (this.emailType != null) {
            //onSuccess(this.appYear.text, ET.selectedEmailTypesController.emailType.email_template_type_id);
        }
    }.observes('emailType')
});

ET.emailView = Ember.View.extend({
    contentBinding: 'ET.selectedEmailTypesController.emailType'
});

ET.appYearController.loadYears(2012);
var JSON_ETTypes = [{
    "descr": "All",
    "email_template_type_id": 1},
{
    "descr": "Secondary Invite",
    "email_template_type_id": 2},
{
    "descr": "Assign Screener",
    "email_template_type_id": 3},
{
    "descr": "Assign Reviewer",
    "email_template_type_id": 4},
{
    "descr": "Interview Invite",
   ...