How to pass model value to new route in ember.js

I have a product page that shows a list of products by clicking one on the product page with more information about it, as well as a purchase button that sends the user to the checkout page where I want to get the price, as well as the name of the item and image. But I just don’t know how I can achieve this.

My templates look like this:

<script type="text/x-handlebars" data-template-name="product">
<div id="product">
    <img {{bindAttr src="img"}}/>
    <div class="details">
        <p class="title">{{title}}</p>
        <span class="price">${{price}}</span>
        <p class="desc">
            {{desc}}
        </p>
        {{#link-to 'checkout' product classNames="buy"}}Buy This Item{{/link-to}}
    </div>
</div>
</script>
<script type="text/x-handlebars" data-template-name="checkout">
    <h1>Checkout Page</h1>
    <p>{{price}}</p>
</script>

And the product route code looks like this:

App.ProductsRoute = Ember.Route.extend({
    model: function(){
        return this.store.findAll('product');
    }
});

And my shift model looks like this:

App.Product.FIXTURES = [
{
    id: 1,
    title: 'Black Shirt Mens',
    img: 'img/black-shirt-mens.jpg',
    price: 36,
    desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum id ligula porta felis euismod semper.',
    type: 'shirt'
},
{
    id: 2,
    title: 'Black Shirt Womens',
    img: 'img/black-shirt-womens.jpg',
    price: 24,
    desc: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
    type: 'shirt'
},
{
    id: 3,
    title: 'You Are Not a Mistake Poster',
    img: 'img/mistake-poster.jpg',
    price: 28,
    desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
    type: 'poster'
},
{
    id: 4,
    title: 'White Shirt Mens',
    img: 'img/white-shirt-mens.jpg',
    price: 42,
    desc: 'Donec ullamcorper nulla non metus auctor fringilla. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.',
    type: 'shirt'
},
];

If you need a router object for clarity here, it ...

App.Router.map(function() {
    this.resource('products');
    this.resource('shirts',{path: 'products/shirts'});
    this.resource('product', { path: 'products/:product_id' });
    this.resource('checkout');
});
+3
source share
1 answer

Few things:

1) Indicate the route /productin the router

this.resource('products', function() {
    this.resource('product');
});

2) Configure the route products.indexas follows:

App.ProductsRoute = Ember.Route.extend({
    model: function(){
        return this.store.findAll('product');
    }
});

3) products/index:

<script type="text/x-handlebars" data-template-name="products/index">
    {{#each}}
        {{#link-to "product" this}}{{title}}{{/link-to}}
    {{/each}}
</script>

4) checkout.

App.CheckoutRoute = Ember.Route.extend({
    model: function(){
        return this.modelFor('product');
    }
});

, {{#link-to 'checkout' product classNames="buy"}}Buy This Item{{/link-to}} product , App.Product. , {{#link-to 'checkout' this classNames="buy"}}Buy This Item{{/link-to}}, .

jsBin: http://emberjs.jsbin.com/texiqepu/3/edit

+1

All Articles