Javascript 如何从父数组视图显示子对象视图

我在下面有一个产品列表。当我点击一个产品时，我只想看到产品信息

我获得产品信息的唯一方法是在父产品模板上使用

{{outlet}}

或

{{render}}

，这不是我想要的

var App = Ember.Application.create();

App.ApplicationController = Ember.Controller.extend({

});

App.ProductsController = Ember.ArrayController.extend({
    sortProperties: ['id']
});

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

App.ProductsRoute = Ember.Route.extend({
    model: function () {
        return App.Products.find();
    }
});

// Models
App.Store = DS.Store.extend({
    revision: 11,
    adapter: 'DS.FixtureAdapter'
});

App.Products = DS.Model.extend({
    title: DS.attr('string'),
    artist: DS.attr('string'),
    image: DS.attr('string'),
    price: DS.attr('number'),
    url: DS.attr('string')
});



App.Products.FIXTURES = [
    {
        id: 1,
        title: 'The Door',
        artist: 'Religious Knives',
        image: 'http://ecx.images-amazon.com/images/I/51og8BkN8jL._SS250_.jpg',
        large_image: 'http://ecx.images-amazon.com/images/I/51og8BkN8jL._SS500_.jpg',
        price: 9.98,
        url: 'http://www.amazon.com/Door-Religious-Knives/dp/B001FGW0UQ/?tag=quirkey-20'
    },
    //etc etc
];

-------------MARKUP------------


<script type="text/x-handlebars" data-template-name="products">
                    <span>{{ controller.model.length }} item(s) in stock</span>
                    <div>
                    {{#each product in controller.model}}
                        <div class="item">
                            <div class="item-image">
                                {{#linkTo "product" product}}
                                    <img {{bindAttr src="product.image" alt="product.title"}}>
                                {{/linkTo}}
                            </div>
                            <div class="item-artist">{{product.artist}}</div>
                            <div class="item-title">{{product.title}}</div>
                            <div class="item-price">${{product.price}}</div>
                        </div>
                    </div>
                    {{/each}}

                  {{render product}}
            </script>

            <script type="text/x-handlebars" data-template-name="product">

                    <div class="item-detail">
                        <div class="item-image">
                            <img {{bindAttr src="large_image" alt="title"}} />
                        </div>
                        <div class="item-info">
                            <div class="item-artist">{{artist}}</div>
                            <div class="item-title">{{title}}</div>
                            <div class="item-price">${{price}}</div>
                            <div class="item-form">

                                <p>
                                    <label>Quantity:</label>
                                    <input type="text" size="2" data-bind="value: quantity" />
                                </p>
                                <p>
                                    <button data-bind="click: $parent.addItem">Add to Cart</button>
                                </p>

                            </div>
                            <div class="item-link"><a {{bindAttr href="url"}}">Buy this item on Amazon</a></div>
                            <div class="back-link"><a href="#/">&laquo; Back to Items</a></div>
                        </div>
                    </div>

            </script>

---

您可以将路由器映射更改为以下内容：

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

也考虑使用索引路由，当页面加载时，索引路由将您转移到特定位置：

App.IndexRoute = Em.Route.extend({
    redirect: function() {
        this.transitionTo('products');
    }
});

小提琴：

---

运行：

我以为建议是保持这种类型的东西嵌套？如果我不嵌套，如果用户直接进入产品id URL例如/products/3，我将如何填充产品模型？在您的示例中，我认为您需要一个单独的路径来查找单个产品？我已经修复了小提琴，并为其他路径添加了缺失的内容。关于嵌套，如果你这样做，你必须手动将模板设置到正确的出口，就像你在更新中所做的那样（只需确保在其他路由中也执行renderTemplate），否则你就不会嵌套路由。谢谢你的帮助，我正试图进入Ember，但发现很难！是的，开始的时候学习曲线有点陡峭，但一旦你“学会了”，你就会好起来。我花了一段时间才理解了一些事情，并调和了一些关于如何使用它的先入之见。很多人都对这个框架有意见，因为自最初发布以来，它发生了很大的变化。现在好多了，稳定多了

App.IndexRoute = Em.Route.extend({
    redirect: function() {
        this.transitionTo('products');
    }
});