Question

我正在尝试制作产品项目列表，并且当您点击图片或标题时，它会显示单个页面/模板以及更多信息等。

但是，当我使用{{#each product in model}}时，link-to只会返回一个未定义的内容。

继承我拥有的东西

App.Router.map(function(){
    this.route('about', { path: '/aboutus' } );
    this.resource('products');
    this.resource('product', { path: '/products/:title' } );
    this.resource('contacts');
});

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

// Logging out Params from the Route
App.ProductRoute = Ember.Route.extend ({
    model: function(params){
        return App.PRODUCTS.findBy('title', params.title);
    }
});

App.PRODUCTS = [
    {
        title: 'Flint',
        price: 99,
        description: 'Flint is a hard, sedimentary cryptocrystalline form of the mineral quartz, categorized as a variety of chert.',
        isOnSale: true,
        image: 'images/flint.png'
    },
    {
        title: 'Kindling',
        price: 249,
        description: 'Easily combustible small sticks or twigs used for starting a fire.',
        isOnSale: false,
        image: 'images/kindling.png'
    }
];

当我使用此方法{{#each product in model}}时，我得到了未定义的

<script type='text/x-handlebars' data-template-name='products'>
    <h1>Products</h1>
    <ul class="list-unstyled col-md-8">
    {{#each product in model}}
        <li class='row m-b'>
            {{#link-to 'product' this }}<img {{bind-attr src='product.image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
            <div class="col-md-7">
                <h2>{{product.title}}</h2>
                <p class="product-description">{{product.description}}</p>
                <p><button class="btn btn-success">Buy for ${{product.price}}</button></p>
            </div>
        </li>
    {{/each}}
    </ul>
</script>
<script type='text/x-handlebars' data-template-name='product'>
    <div class="row">
        <div class="col-md-7">
            <h2>{{title}}</h2>
            <p>{{description}}</p>
            <p>Buy for ${{price}}</p>
        </div>
        <div class="col-md-5">
            <img {{bind-attr src='image'}} class='img-thumbnail img-rounded' />
        </div>
    </div>
</script>

但是当我只使用{{#each}}时它会正常返回但是它会警告我：DEPRECATION：不推荐使用{{each}}的上下文切换形式。请改为使用关键字表单（{{#each foo in bar}}）。

<script type='text/x-handlebars' data-template-name='products'>
    <h1>Products</h1>
    <ul class="list-unstyled col-md-8">
    {{#each}}
        <li class='row m-b'>
            {{#link-to 'product' this }}<img {{bind-attr src='image'}} class='img-thumbnail col-md-5' alt='product-image' />{{/link-to}}
            <div class="col-md-7">
                <h2>{{title}}</h2>
                <p class="product-description">{{description}}</p>
                <p><button class="btn btn-success">Buy for ${{price}}</button></p>
            </div>
        </li>
    {{/each}}
    </ul>
</script>

我应该使用哪一个，如何修复未定义的错误？我猜测它与App.ProductRoute有关，但无法弄明白，对于余烬来说还是新手：l

Answer 1

你应该使用

{{#each product in model}}

并修复您的undefined使用以下内容：

{{#link-to 'product' product }} ...title... {{/link-to}}

当您使用{{#each}}时，this的上下文会切换到循环中的每个项目，这有时会令人困惑并且已被弃用。当您使用{{#each product in model}}版本时，循环中每个项目的上下文为product，this仍为您输入的内容each

每个与模型中的每个foo，差异和链接到未定义的问题

1 个答案: