Ember Error in Route Model

Question

I am digging into Ember and am trying to serve a list of content to my route model. Here is my App.js code:

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

    App.Router.map(function() {
        this.route('about');
        this.resource('blogs');
        this.resource('projects');
    });

    App.PROJECTS = [
        {
            "id": 1,
            "title": "SnapFoo - SVG Animation Library",
            "textone": "SnapFoo",
            "texttwo": "SVG Animation Library",
            "image": "snapfoo.jpg"
        }
    ];

    App.ProjectsRoute = Ember.Route.extend({
      model: function() {
        return App.PROJECTS;
      }
    });

The PROJECTS array is abbreviated in terms of content but that's the format. Now, I am trying to run my each loop in the Hanldebars template like this:

<script type="text/x-handlebars" data-template-name="projects">
 {{#each}}
  <div class="project-icon">
   <span>{{textone}}</span>
   <span>{{texttwo}}</span>
   <a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
  </div>
 {{/each}}
</script>

However, when doing this, the error I receive is Uncaught TypeError: Cannot read property 'addDependency' of undefined coming from ember.min.js.

If I remove the {{each}} loop, the error goes away which leads me to believe this has something to do with the model in the route. But any advice would be very helpful. Thanks!

Answer 1

You are missing the model in your view, you are iterating over nothing {{each}}

You need put your variable in this case your model .

<script type="text/x-handlebars" data-template-name="projects">
 {{#each model as |project|}}
  <div class="project-icon">
   <span>{{project.textone}}</span>
   <span>{{project.texttwo}}</span>
   <a href="project.php?id=1"><img {{bind-attr alt="title" src="image"}}/></a>
  </div>
 {{/each}}
</script>

I have created an example where you can see as this code work, it's very similar what you want achieve.