CODEWITHSUNDEEP
javascriptember.jsmodelroutes
Jordan
Jordan

Reputation: 2523

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

I have a products page that shows a list of products, clicking on one goes to a product page with some more detailed info on it as well as a purchase button that will send the user to a checkout page where I want to get the price as well as the title of the item and the image perhaps. But I'm just not sure how I can achieve that.

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 products route code looks like this...

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

And my make 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 me router object for clarity here it is...

App.Router.map(function() {
    this.resource('products');
    this.resource('shirts',{path: 'products/shirts'});
    this.resource('product', { path: 'products/:product_id' });
    this.resource('checkout');
});

Upvotes: 3

Views: 2469

Answers (1)

chopper
chopper

Reputation: 6709

A couple of things:

1) Specify the /product route in your Router

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

2) Set up your products.index route like this:

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

3) Create a products/index template:

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

4) You'll need to set the model for the checkout route.

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

Also note that {{#link-to 'checkout' product classNames="buy"}}Buy This Item{{/link-to}} in your product template won't work, since you don't have a property of that name on your App.Product model. You probably want to change it to {{#link-to 'checkout' this classNames="buy"}}Buy This Item{{/link-to}} to pass the current product model.

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

Upvotes: 1

Related Questions