each vs each foo in model, differences and issue with link-to undefined

I'm trying to do a list of product items and make them so when you click the image or title it will show a single page/template with the more info, etc.

But, when ever I use {{#each product in model}} the link-to just returns an undefined.

Heres what I have

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'
    }
];

when I use this method {{#each product in model}} i get undefined

<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>

but when I use just {{#each}} it returns normally BUT it warns me this: DEPRECATION: Using the context switching form of {{each}} is deprecated. Please use the keyword form ({{#each foo in bar}}) instead.

<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>

which one should I use and how do I fix the undefined error? I'm guessing it has to do with the App.ProductRoute but can't figure it out, still new to ember :l