Fictional Products

by fangyang

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0-rc.3/handlebars.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ember.js/1.0.0-rc.1/ember.js"></script>
<script src="https://raw.github.com/ahmacleod/data/c030ca781150c6ea51865bf260b46173f17634cf/dist/ember-data.js"></script>
<script type="text/x-handlebars" data-template-name="application">
    <h1>Fictional Products</h1>
    {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="products">
   {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="products/index">
    {{#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}}
    <hr/>
    <div class="well">
        {{#linkTo products.new class="btn btn-info"}}Add New Product{{/linkTo}} 
    </div>
</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...

JavaScript

App = Ember.Application.create({
  LOG_TRANSITIONS: true
});

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

//==================== Routes ======================

App.IndexRoute = Ember.Route.extend({
    redirect: function() {
        this.transitionTo('products');
    }   
});

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


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

App.ProductDetailsRoute = Em.Route.extend({
    setupController: function(controller, model) {
        var c = this.controllerFor('product');
        controller.set('content', c.get('content'));
    }
});

App.ProductsNewRoute = Em.Route.extend(
{
    renderTemplate: function () {
        this.render('product/edit', {
            controller: 'products.new',
        });
    },
    
    model: function() {        
        var product = this.get('store').createRecord(App.Product);       
        return product;
     },
    
    events: {
        saveNew: function(record) {
            console.log('saving new...');
             this.transitionTo('products');
        }
    }
});

App.ProductEditRoute = Em.Route.extend(
{
    setupController: function(controller, model) {
        var c = this.controllerFor('product');
        controller.set('content', c.get('content'));
    }, 
    events: {
        saveEdit: function(record) {
            //this.get('store').commit();
            this.transitionTo('products');
        }
    }
});

App.ProductRemoveRoute = Em.Route.extend({
    setupController: function(controller, model) {
        var c =...