Ember not render my #each loop


#1

Please help, i dont understand why its not working?

My html:

<script type="text/x-handlebars" data-template-name="application">
    <div class="header">
      <div class="container">
        {{#link-to 'index' class="logo__wrapper"}}
          <img class="logo__img" src="img/ember-love-logo-long.png" alt="logo">
        {{/link-to}}
        <nav class="navigation">
          <ul class="navigation__menu">
            <li class="navigation__menu--item">
              {{#link-to 'index' class="navigation__menu--link"}}
                Home
              {{/link-to}}
            </li>
            <li class="navigation__menu--item">
              {{#link-to 'about' class="navigation__menu--link"}}
                About
              {{/link-to}}
            </li>
            <li class="navigation__menu--item">
              {{#link-to 'products' class="navigation__menu--link"}}
                Products
              {{/link-to}}
            </li>
          </ul>
        </nav>
      </div>
    </div>
    <div class="container">{{outlet}}</div>
    <footer class="footer__wrapper">
      <div class="container footer">
        Dima Vel&copy;2017 Ember-app.
      </div>
    </footer>
  </script>

  <script type="text/x-handlebars" data-template-name="index">   
    <h1>Welcome, {{userName}}</h1>
    <img src="{{logoUrl}}" alt="logo" />
  </script>

  <script type="text/x-handlebars" data-template-name="about">
    <h1>About Us</h1>
  </script>

  <script type="text/x-handlebars" data-template-name="products">
    <h1>This will be our products</h1>
    <div class="list-group">
      {{#each}}
        <h2>{{title}}</h2>
      {{/each}}
    </div>

  </script>

and my app.js:

var App = Ember.Application.create({
    LOG_TRANSITIONS: true
});

/*Routers*/
App.Router.map(function() {
  this.route('about');
  this.route('products');
});

/*Models*/
App.PRODUCTS = [
  {
    title: 'Knife'
  },
  {
    title: 'erewqwe'
  },
  {
    title: 'qwretds'
  }
];


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

/*Controllers*/
App.IndexController = Ember.Controller.extend({
  userName: 'Dima',
  logoUrl: 'img/ember-love-logo-long.png'
});

Spent a lot of time to understand, but to no avail, at least tell me what could be wrong. :cry:


#2

Hi @dimavel, you are not specifying what it should each over, try:

{{#each model as |item|}}
  <h2>{{item.title}}</h2>
{{/each}}

#3

Yes, its works, thank you very much for help. Because i stuck at this task for a long time, im tried display some data but nothing.