JSFiddle - React, Tailwind, and code Playground

by Retsam19

HTML

<script src=" https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.8.1/ember.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.3.0/handlebars.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.8.1/ember.js"></script>
<script type="text/x-handlebars" data-template-name="main">
    <section id="resapp">
        <fieldset>
        <h3>Add Resources</h3>
        <form>
            <span >Description:</span>
            {{input type="text" id="description" value=description style="width:180px;"}}
            <span > URL:</span>
            {{input type="text" id="url" value=url  style="width:340px;"}}
            <button {{action "createRes"}}>Add</button>
        </form>
        <a href="#" {{action "showResource"}}>Show</a>

        <h3>List of Resources</h3>
        <table border="1" style="width:740px;">
            <thead>
                <tr>
                    <th><h4>Description</h4></th>
                    <th><h4>URL</h4></th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
            {{#each res in model}}
                <tr>
                    <td>
                    {{input type="text" value=res.ResourceDescription style="width:100%"}}
                    </td>
                    <td>
                    {{input type="text" value=res.ResourceAddress style="width:100%"}}
                    </td>
                    <td><button {{action "removeRes" res}}>Remove</button></td>
                </tr>
            {{/each}}	
            </tbody>
            
        </table>

        </fieldset>

    </section>
</script>

JavaScript

window.App = Ember.Application.create();

App.Router.map(function () {
    this.resource('main', { path: '/' });
});

App.MainRoute = Ember.Route.extend({
    model: function() {
        return [{ResourceAddress: 'http://www.discoversdk.com', ResourceDescription:'Great site'}]
    }
});
App.MainController = Ember.Controller.extend({
    actions: {
    	
        createRes: function () {
            var description = this.get('description');
            var url = this.get('url');
            if (!description.trim()) { return; }
            if (!url.trim()) { return; }

            this.get('model').pushObject({
                ResourceAddress: url,
                ResourceDescription: description
            });

            this.set('url', '');
            this.set('description', '');
   
        },
        showResource: function(){
            alert(JSON.stringify(this.get("model")));
        },
        removeRes: function (res) {
            this.get("model").removeObject(res);   
        }
    }
});