javascript - 如何将模型值传递给 ember.js 中的新路由

标签 javascript ember.js model routes

我有一个显示产品列表的产品页面,点击其中一个会进入一个产品页面,其中包含一些更详细的信息以及一个购买按钮,该按钮会将用户带到我想要的结帐页面价格以及商品的标题和图片。但我只是不确定如何才能做到这一点。

我的模板看起来像这样......

<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}} 以传递当前产品模型。

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

关于javascript - 如何将模型值传递给 ember.js 中的新路由,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21819007/

相关文章:

javascript - jquery/javascript 中的 $(window) 和 window 有什么区别

javascript - 将日期发送到 MVC 模型中的 Javascript new Date() 对象更改日期

javascript - fabric.js 中的圆形控制旋钮

ember.js - 使用 RESTAdapter 自定义后请求

javascript - For 在主干集合上循环

javascript - 在特殊事件上添加多个变量并输出到特定的 div。 (jQuery 和 Javascript)

javascript - Ember : Loading data for other route

javascript - Ember.js 嵌套的 ArrayController 和模型

php - CakePHP:根据配置值全局更改所有模型的数据库连接

laravel-5 - 如何使用 laravel eloquent 连接 3 个表