我有一个显示产品列表的产品页面,点击其中一个会进入一个产品页面,其中包含一些更详细的信息以及一个购买按钮,该按钮会将用户带到我想要的结帐页面价格以及商品的标题和图片。但我只是不确定如何才能做到这一点。
我的模板看起来像这样......
<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');
}
});
我的 make shift 模型看起来像这样......
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');
});
最佳答案
一些事情:
1) 在你的 Router 中指定 /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');
}
});
另请注意,{{#link-to 'checkout' product classNames="buy"}}Buy This Item{{/link-to}}
在您的产品
模板将不起作用,因为您的 App.Product
模型上没有该名称的属性。您可能想将其更改为 {{#link-to 'checkout' this classNames="buy"}}Buy This Item{{/link-to}}
以传递当前产品模型。
关于javascript - 如何将模型值传递给 ember.js 中的新路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21819007/