Ember addToCart

by amindunited

HTML

<!-- SCRIPTS -->
<script src="//cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.1.2/handlebars.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ember.js/1.2.0/ember.min.js"></script>
    
<script type="text/x-handlebars" data-template-name="application">
    <h1>App</h1>
    <main>
        {{outlet}}
    </main>
    {{outlet ticket}}
    
</script>
<script type="text/x-handlebars" data-template-name="home">
    <h3>Home</h3>
    <ul class="products">
    {{#each product in view.content}}
        <li {{action addTicket product}}>
            <span class="product_name">{{product.name}}</span><!--
            --><span class="product_price">{{product.price}}</span>
        </li>
    {{/each}}
    </ul>
</script>

<script type="text/x-handlebars" data-template-name="cart">
    <h1>Cart</h1>
    <h3>You are about to place</h3>
    {{log view}}
    {{log controller}}
    <div> {{price}} </div>
    <div> on </div>
    <div> {{name}}</div>
    {{#link-to 'home'}}<=Home{{/link-to}}
    
</script>

<script type="text/x-handlebars" data-template-name="ticket">
    <h1>Ticket</h1>
    <h2>Cart Ticket</h2>
    <div>{{view.name}}</div>
    <div>Odds: {{formatCurrency content.price}}</div>
    <input name="quantity" min="1" {{bind-attr value=stake}} placeholder="enter stake"/>
    <a {{action addToCart this target="view"}} class="addToCart clearfix">Add To Cart</a>
    <a {{action cancel this target="view"}} class="cancel clearfix">Cancel!</a>
</script>

CSS

.clearfix:before,
.clearfix:after {
    content:"";
    display:table;
}
.celarfix:after {
    clear:both;
}
.products li {
    border: solid 1px gray;
    margin: 5px 0px 5px 0px;
}
.product_name {
    display: inline-block;
    width: 80%;
}
.product_price {
    display: inline-block;
    width: 20%;
    text-align: center;
}
.cartticket {
    border-radius: 5px;
    background-color: rgba(127, 127, 127, .5);
    width: 100%;
    height: 100%;
}
.cancel {
    background-color: yellow;
    float: right;
    width: 15%;
    padding 5px;
    text-align: center;
}
.addToCart {
    background-color: green;
    float: right;
    width: 15%;
    padding 5px;
    text-align: center;
}

JavaScript

Ember.Handlebars.helper('formatCurrency', function(value, params) {
	var val = parseFloat(value).toFixed(2);
	if (!val || val == "NaN") {
		return "";
	}
	return parseFloat(value).toFixed(2);
});

var serverDataCart = {};

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

App.ApplicationRoute = Ember.Route.extend({
    actions:{
        addTicket: function(obj){
            console.log("add ticket", obj);
            var tick = App.Ticket.create(obj);
            var tickController = App.TicketController.create();
            tickController.set('model', tick);
            this.render('ticket', {into:'application', outlet:'ticket', controller:tickController});
            $('main').hide('fade');
        }
    }
});

App.Router.map(function(){
    this.route('home', {path: '/'});
    this.route('cart', {path: 'cart'});
});

App.Router.reopen({
    actions: {
        addToCart: function(){
            console.log("up in the router");
        }
    }
});

App.CartRoute = Em.Route.extend({
    model: function(){
        
        var self = this;
        return $.ajax({
            url:"/echo/json",
            data: {
                json: {"foo":"bar"},
                delay: 3
            },
            success: function(data) {
                return {fark:"flip"}
            }
        }).then(function(){
            console.log("returning .... "+serverDataCart);
            return serverDataCart;
        });
        //return 
    }
});

App.CartHandler = Em.Object.extend(Ember.Evented, {
    addToCart: function(obj){
        console.log("the handler got", obj);
        var ticket = App.Cartticket.create(obj);
        
        console.log(ticket);
    }
});
App.cartHandler = App.CartHandler.create();


App.HomeView = Em.View.extend(Ember.Evented, {
    content: [
        {name:"Product_1_1", price:11.9},
        {name:"Product_1_2", price:12.8},
        {name:"Product_1_3", price:13.7},
        {name:"Product_1_4", price:14.6},
        {name:"Product_1_5", price:15.5},
...