如何在Ember.js中将模型值传递到新路由

Question

如何在Ember.js中将模型值传递到新路由

3

我有一个产品页面，显示一些产品列表，点击其中一个产品会跳转到该产品的详细信息页面，还有一个购买按钮，点击后会跳转到结账页面。在结账页面上，我想获取该商品的价格、标题和图片等详细信息。但我不确定如何实现这个功能。

我的模板长这样...

<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>

而产品路由代码看起来像这样...

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

我的临时模型看起来像这样...

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'
},
];

如果您需要我提供路由器对象以便更清楚，这里是它的内容...

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

- Jordan

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- chopper · Accepted Answer

有几件事情：

1）在您的路由器中指定/product路由。

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

2) 将您的products.index路由设置如下：

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');
    }
});

注意，在你的“product”模板中，{{#link-to 'checkout' product classNames="buy"}}购买此商品{{/link-to}}不起作用，因为在你的App.Product模型中没有这个属性。你可能想要将它更改为{{#link-to 'checkout' this classNames="buy"}}购买此商品{{/link-to}}以传递当前产品模型。

jsBin链接：http://emberjs.jsbin.com/texiqepu/3/edit