2014-12-30 1 views
0

제품 항목의 목록을 만들고 이미지 또는 제목을 클릭하면 해당 항목/페이지가 표시되는 단일 페이지/템플릿이 표시됩니다. 더 많은 정보 등모델, 차이점 및 문제가있는 각 모델과의 차이점은 다음과 같습니다.

그러나 내가 {{#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

답변

2

당신은

{{#each product in model}}

를 사용해야하고 undefined는 다음을 사용하여 해결하기 위해 :

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

사용

는 {{#each}} this의 상황은 때때로 혼란이며 루프의 각 항목으로 전환됩니다 더 이상 사용되지 않습니다. {{#each product in model}} 버전을 사용하면 루프를 통과하는 각 항목의 컨텍스트가 product이고 입력 한 내용은

+0

이니 정말 고마워요! –

관련 문제