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>
    {{#link-to "sports"}}Link to Sports{{/link-to}}
    <main>
        {{outlet}}
    </main>
    
</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="sports">
    <h1>Sports</h1>
    {{view Ember.Select content=content 
       optionValuePath="content.id"
       optionLabelPath="content.name"
        value=selectedName
    }}
    {{outlet}}
</script>
<script type="text/x-handlebars" data-template-name="sport">
    <h1>Sport</h1>
    {{view Ember.Select content=content 
       optionValuePath="content.id"
       optionLabelPath="content.name"
        value=selectedName
    }}
</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 = [
    {name: "option 1", id:987766},
    {name: "option 2", id:76543},
    {name: "option 3", id:65432},
    {name: "option 4", id:12345},
    {name: "option 5", id:34567}
];

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

App.ApplicationRoute = Ember.Route.extend({
    actions:{
        
    }
});

App.Router.map(function(){
    this.route('home', {path: '/'});
    this.resource('sports', {path: '/sports'}, function(){
        this.route('sport', {path:'/:id'})
    });
});

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

App.SportsRoute = Em.Route.extend({
    model: function(){
        
        var self = this;
        return $.ajax({
            url:"/echo/json",
            data: {
                json: {"foo":"bar"},
                delay: 1
            },
            success: function(data) {
                return data;
            }
        }).then(function(data){
            console.log("returning .... ", data, serverDataCart);
            return serverDataCart;
        });
        //return 
    }
});
App.SportsController = Em.Controller.extend({
    selectedName: null,
    onSelectionChange: function(){
        console.log("selectedName ", this.get('selectedName'));
        this.transitionToRoute('sports.sport', this.get('selectedName'));
    }.observes('selectedName')
});
App.SportRoute = Em.Route.extend({
    model: function(){
        console.log("Ma gooooooooooo");
        return {}
    }
})