제품 항목의 목록을 만들고 이미지 또는 제목을 클릭하면 해당 항목/페이지가 표시되는 단일 페이지/템플릿이 표시됩니다. 더 많은 정보 등모델, 차이점 및 문제가있는 각 모델과의 차이점은 다음과 같습니다.
그러나 내가 {{#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'
}
];
을 Heres는 무엇 {{#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}}
정상적으로 반환하지만 그것은 나에게이 경고 : 중단 값 : 사용 {{각}}의 컨텍스트 전환 양식은 더 이상 사용되지 않습니다. 대신 키워드 양식 ({{#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
이니 정말 고마워요! –