0

I am trying to follow along with this older stack overflow question in Ember 2.3, but the syntax has been deprecated. Is there anyway I can group several types of models into a single object to iterate over(like a tumblr style dashboard) over in one template in Ember 2.0+?

Original question:

stream: function() {
var post = this.get('post'),
    bookmark = this.get('bookmark'),
    photo = this.get('photo');

var stream = [];

stream.pushObjects(post);
stream.pushObjects(bookmark);
stream.pushObjects(photo);
return stream;

}.property('post.@each', 'bookmark.@each', 'photo.@each'),

My attempt:

stream: Ember.computed('post.[]', 'bookmark.[]', 'photo.[]', function() {
var post = this.get('post');
var bookmark = this.get('bookmark');
var photo = this.get('photo');

var stream = [];

stream.pushObjects(post);
stream.pushObjects(book);
stream.pushObjects(photo);    
return stream;
}),
Community
  • 1
  • 1
nephenee245
  • 19
  • 4
  • Does it work for you? If it doesn't, my first guess would be that your variables (post, bookmark and photo) are Ember objects, kind of wrappers over real models. Iterating over this wrappers in your template will not work. What you need to do in such a case is retrieving their content, true array data they wrap. `var post = this.get('post.content'); var bookmark = this.get('bookmark.content'); var photo = this.get('photo.content');` Now, post, bookmark and photo are arrays that you can merge into a single array you are calling stream. – Pavol Mar 09 '16 at 08:59
  • Unfortunately, my code and the code edited to include your suggestions both give me the following error: Object Inspector error for stream TypeError: Must pass Ember.Enumerable to Ember.MutableArray#pushObjects. – nephenee245 Mar 09 '16 at 09:01
  • Ok, tell us what is the `post` property? I guess it's a RecordArray which you loaded with `this.store.query()` or `this.store.findAll()` in a route associated with the controller, isn't it? If yes, it should return an array of InternalModels. I assume it's an array because you are using `post.[]` and `post.@each`. Btw, what happens if you use `stream.pushObject()` instead of `stream.pushObjects()`? – Pavol Mar 09 '16 at 09:17
  • I don't think it's an array (pardon my ignorance), it's called through this.store.findAll() and it appears to be a class? There's a '_content' property and on that is a 'content' property with the posts as an array in a route like you said. – nephenee245 Mar 09 '16 at 09:26
  • Yea, then this should work: `var arrayOfPosts = this.get('post').get("content"); // returns [InternalModels*] // ... do the same ith bookmarks and photos var stream = []; stream.pushObjects(arrayOfPosts);` `this.get('post')` returns a class that I described as a wrapper for all the data retrieved by `findAll()`. This class has a property _content_ that includes all the data loaded in a form of an array. Array of InternalModels.Since `pushObjects()` expects an array as an argument, it should work. ;-) – Pavol Mar 09 '16 at 10:02
  • I'm getting closer.... :P writing `this.get('posts').get('_content').get('content')` and returns a stream with the correct number of internal models in it... now how do I access the model properties in handlebars? Thank you for all your help so far! I really appreciate it. – nephenee245 Mar 09 '16 at 11:06
  • Let's assume every item in your array has a property called title... `/*route or controller (in this case call just this.setProperties())*/ this.controller.setProperties({ posts: stream }); /* template */ {{#each stream as |singleItem|}}
    Title: {{singleItem.title}}!
    {{/each}}` Ember [Guides](https://guides.emberjs.com/v2.4.0/templates/displaying-a-list-of-items/) is a great resource for stuff like that. Btw, I recommend you to use Ember-Inspector plugin for Chrome, it allows you to browse route/controller's properties and many more.     – Pavol Mar 09 '16 at 12:33

0 Answers0