How to use Ember.Object instance with #each loop-Collection of common programming errors

I am putting together my first Ember app and having a little trouble with the data. It looks like my options are:

• via Ember Data (sounds like this is not ready for production and possibly broken)
• via an Ember.Object (having trouble iterating over these)
• via a plain JS array (I suspect this is far too simplistic)

I’m guessing the way to go is with an Ember.Object instance:

// Attempt to modify the Blog Tutorial (http://emberjs.com/guides/) to use Ember.Object for data
App.Posts = Ember.Object.extend([
{
    id: '1',
    title: "Rails is Omakase",
    author: { name: "d2h" },
    date: new Date('12-27-2012'),
    body: "I want this for my ORM, I want that for my template language, and let's finish it off with this routing library. Of course, you're going to have to know what you want, and you'll rarely have your horizon expanded if you always order the same thing, but there it is. It's a very popular way of consuming software.\n\nRails is not that. Rails is omakase."
}, {
    id: '2',
    title: "The Parley Letter",
    author: { name: "d2h" },
    date: new Date('12-24-2012'),
    body: "A long list of topics were raised and I took a time to ramble at large about all of them at once. Apologies for not taking the time to be more succinct, but at least each topic has a header so you can skip stuff you don't care about.\n\n### Maintainability\n\nIt's simply not true to say that I don't care about maintainability. I still work on the oldest Rails app in the world."  
}
]);
posts = App.Posts.create();

But then I’m having trouble looping through this data:

{{#each model}} {{/each}}

{{outlet}}

My inspector console reads:

Denying load of chrome-extension://ganlifbpkcplnldliibcbegplfmcfigp/scripts/vendor/jquery/jquery.min.map. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension. (index):1
DEBUG: -------------------------------                                ember-1.0.0-rc.8.js:382
DEBUG: Ember.VERSION : 1.0.0-rc.8                                     ember-1.0.0-rc.8.js:382
DEBUG: Handlebars.VERSION : 1.0.0                                     ember-1.0.0-rc.8.js:382
DEBUG: jQuery.VERSION : 1.9.1                                         ember-1.0.0-rc.8.js:382
DEBUG: -------------------------------                                ember-1.0.0-rc.8.js:382
Assertion failed: Expected hash or Mixin instance, got [object Array] ember-1.0.0-rc.8.js:382
Assertion failed: The value that #each loops over must be an Array. You passed    ember-1.0.0-rc.8.js:382
Uncaught TypeError: Object [object Object] has no method 'addArrayObserver'     ember-1.0.0-rc.8.js:21860
Ember Debugger Active
Resource interpreted as Script but transferred with MIME type text/html: "http://www.superfish.com/ws/sf_main.jsp?dlsource=tduqbwo&userId=834F74FF-83A8-4EDB-BC8A-9433A559E216".

So how does one loop through data in an Ember.Object instance?

1. What you did is wrong(I think). You created an instance of App.Posts, that object’s content is an array. What you should have done is, to lets say, create instances of App.Post (singular), and put them in array. The thing with what you did, is that the App.Posts instance is an object, which you assigned to a controller’s content, so, it is only ONE(not an array) object, and in the view you’re trying to iterate through it, but it is not an array, if you want to iterate through it, try:

   {{#each post in model.content}}
     

   {{/each}}

   and see if it works. But also try what I said, it is better.

   {{#link-to ‘post’ this}}{{post.title}} by {{post.author.name}}{{/link-to}}

Originally posted 2013-11-23 09:50:36.