JSFiddle - React, Tailwind, and code Playground

by wrxsti85

HTML

<script src="http://diy-code.com/libs/handlebars-1.1.2.js"></script>
<script src="http://diy-code.com/libs/ember-1.2.0.js"></script>
<script type="text/x-handlebars">
    <div class="navBar">
        <ul class="mainNav1">
            <li>Home</li>
            <li>{{#link-to 'about'}}About{{/link-to}}</li>
            <li>{{#link-to 'contact'}}Contact{{/link-to}}</li>
            <li>{{#link-to 'forms'}}Forms{{/link-to}}</li>
        </ul>
    </div>
    
    <div class="content">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="index">
    <h1>Welcome to my Ember Test!</h1>
</script>

<script type="text/x-handlebars" data-template-name="about">
    <h1>This is the about us page.</h1>
</script>

<script type="text/x-handlebars" data-template-name="contact">
    <h1>This is the contact page.</h1>
</script>

<script type="text/x-handlebars" data-template-name="forms">
    <h3>Forms</h3>
    <ul class="mainNav2">
    {{#each}}
        <li>
            {{#link-to 'form' this}}{{name}}{{/link-to}}
        </li>
    {{/each}}
    </ul>
    <div class="formContent">
        {{outlet}}
    </div>
</script>

<script type="text/x-handlebars" data-template-name="form">
    <h2>{{name}}</h2>
    {{#each item in elements}}
    <label for="{{item.inputName}}">{{item.inputName}}</label><input type="{{item.inputType}}" name="{{item.inputName}}" />
    {{/each}}
</script>

CSS

body {
    padding: 0px;
    margin: 0px;
}

hr {
    border-top: solid 1px;
    border-bottom: none;
    margin: 0px;
}

h1, h2, h3 {
    margin: 2px 5px;
}

.navBar {
    background: #e5e5e5;
    padding: 10px;
}

.mainNav1 {
    list-style: none;
    margin: 0px;
    padding:0px;
}

.active {
    font-weight: bold;
}

.mainNav1 li {
    display: inline;
    padding: 5px 10px;
    cursor: pointer;
}

.mainNav1 li:hover {
    background: #c5c5c5;
}

.mainNav2 {
    display: inline-block;
    padding: 0px;
    margin: 0px;
    border: solid 1px;
}

.content {
    padding: 10px;
}

.formContent {
    display: inline-block;
    vertical-align: top;
    border: solid 1px #000;
}

form {
    border: solid 1px;
    margin: 10px;
}

JavaScript

var App = Ember.Application.create();

App.Router.map(function(){
    this.resource('about');
    this.resource('contact');
    this.resource('forms', function(){
        this.resource('form', { path: ':form_id' });
    });
});

App.FormsRoute = Ember.Route.extend({
    model: function(){
        return forms;
    }
});

App.FormRoute = Ember.Route.extend({
    model: function(){
        return forms[0].elements;
    },
    serialize:function(model){
        return {form_id:Em.get(model, 'id')};   
    }
});

var forms = [
    {
        "id": 1,
        "name": "Submissions",
        "elements": [
            {
                "inputType": "text",
                "inputName": "Customer_Name"
            },
            {
                "inputType": "text",
                "inputName": "Customer_Number"
            },
            {
                "inputType": "checkbox",
                "inputName": "Outbound_Call"
            },
            {
                "inputType": "submit",
                "inputName": "submit"
            }
        ]
    },
    {
        "id": "2",
        "name": "Initial Interview",
        "elements": [
            {
                "inputType": "text",
                "inputName": "Business_Name"
            },
            {
                "inputType": "text",
                "inputName": "Business_Hours"
            },
            {
                "inputType": "checkbox",
                "inputName": "Business_Something"
            },
            {
                "inputType": "submit",
                "inputName": "submit"
            }
        ]
    }
];