JSFiddle - React, Tailwind, and code Playground

by schawaska

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script type="text/x-handlebars" data-template-name="application">
    <h1>Fictional Products</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="products">
    {{#if controller.hasProducts}}
    <table class="table table-hover">
        <thead>
            <tr>
                <th>Id</th>
                <th>Name</th>
                <th>Price</th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            {{#each product in controller}}
                 <tr>
        <td>{{product.id}}</td>
        <td>{{product.name}}</td>
        <td>$ {{product.price}} (+ Taxes)</td>
        <td>
            {{#linkTo product.details product class="btn btn-info"}}Details{{/linkTo}} 
            {{#linkTo product.edit product class="btn btn-info"}}Edit{{/linkTo}}
            {{#linkTo product.remove product class="btn btn-warning"}}Delete{{/linkTo}}
        </td>
    </tr>
            {{/each}}
        </tbody>
    </table>
    {{else}}
    <div class="well">
        There are no products
    </div>
    {{/if}}
</script>

<script type="text/x-handlebars" data-template-name="product/details">    
    <fieldset>
        <legend>Details</legend>
        <div class="row-fluid">
            <div class="span2">Product Name: </div>
            <div class="span4">{{content.name}}</div>
        </div>
        <div class="row-fluid">
            <div class="span2">Price: </div>
            <div class="span4">{{controller.total}} (Price: {{content.price}} + Tax: {{controller.tax}})</div>
        </div>
    </fieldset>
    {{#linkTo products class="btn"}}Back to List{{/linkTo}}
</script>

<script type="text/x-handlebars" data-template-name="product/edit">    
    <fieldset>
        <legend>Remove</legend>
        <div class="row-fluid">
            <div class="span2">Product Name: </div>
            <div...

JavaScript

App = Ember.Application.create();

App.ProductRemoveController = Em.ObjectController.extend({
    remove: function() {
        this.get('target').send('confirmRemove', this.get('content'));    
    }
});

App.ProductEditController = Em.ObjectController.extend({
    save: function() {
        this.get('target').send('saveEdit', this.get('content'));
    }
});

App.ProductDetailsController = Em.ObjectController.extend({
    tax: function() {
        return ((this.get('content.price') * 13) / 100).toFixed(2);
    }.property('content'),
    total: function() {
        var priceValue = this.get('content.price');
        var tax = ((this.get('content.price') * 13) / 100);
    
        return (parseFloat(priceValue) + parseFloat(tax)).toFixed(2);
    }.property('content')
});

App.ProductsController = Em.ArrayController.extend({
    hasProducts: function() {
        return this.get('content.length') > 0;
    }.property('content.@each')
});

App.Store = DS.Store.extend({
    revision: 12,
    adapter: 'DS.FixtureAdapter'
});

App.Product = DS.Model.extend({
    name: DS.attr('string'),
    price: DS.attr('number')
});

App.Product.FIXTURES = [
    {id: 1, name: 'Flux Capacitor', price: 103.33 },
    {id: 2, name: 'Romulan Cloaking Device', price: 72.64},
    {id: 3, name: 'Lightsaber', price: 89.95},
    {id: 4, name: 'Proton pack', price: 59.00}
];

App.Router.map(function() {
    this.resource('products');
    this.resource('product', {path : 'products/:product_id'}, function() {
        this.route('details', {path: '/details'})
        this.route('edit', {path: '/edit'})
        this.route('remove', {path: '/remove'})
    }); 
});

App.ProductsRoute = Em.Route.extend({
    model: function() {
        return App.Product.find();
    }
});


App.ProductRoute = Em.Route.extend({
    model: function(params) {
        return App.Product.find(params.product_id);
    },
    setupController: function(controller, model) {
        controller.set('content', model);
   ...