elwayman02 / ember-tumblr

Ember-Data abstraction for the Tumblr API
http://github.jhawk.co/ember-tumblr/
MIT License
7 stars 1 forks source link

Find multiple post types #176

Closed MrChriZ closed 6 years ago

MrChriZ commented 6 years ago

I wanted to be able to view multiple post types on a single page - photos and text. I've found a method of doing this. Creating a file:

app\services\store.js

With the following contents: https://gist.github.com/MrChriZ/160d4f392cdceadc97212dab3b6cb269#file-store-js

This then allows a route like so: return this.store.findMultiple(['tumblr-post-photo', 'tumblr-post-text']);

This might not be a bad thing to include in this addon. However it could just be added in the project that's using the addon. So I thought I'd add it here and if it's appropriate I'll add a pull request. If not I'll close the issue but it's here if anyone needs it.

elwayman02 commented 6 years ago

Did you try requesting both arrays from the store and merging them via computed property inside the component where you want to render the combined list?

MrChriZ commented 6 years ago

I'm not sure I know how. I can do the first part:

export default Route.extend({
  model() {
    return hash({      
      photos: this.store.findAll('tumblr-post-photo'),
      texts: this.store.findAll('tumblr-post-text')
    })
  }
});

Then i can access the photos or the texts as follows: {{tumblr-blog posts=model.photos}} or {{tumblr-blog posts=model.texts}}

but I can't use union in the template: {{tumblr-blog posts=Ember.Computed.union(model.texts,model.photos)}} As that's not allowed?

I'm still relatively new to Ember.


Have also just tried

model() {
    return merge(this.store.findAll('tumblr-post-photo'),this.store.findAll('tumblr-post-text'));    
  }

However only the photos were returned :confused:

elwayman02 commented 6 years ago

Create a controller for your route, then add this to the controller:

posts: Ember.computed.union('model.texts', 'model.photos')

Then in your template:

{{tumblr-blog posts=posts}}

You may also want to apply a sort after mergin, as it will put all text posts first, then the photos.

sortBy: ['date:asc'], // Or use 'date:desc', or whatever sort method you want
sortedPosts: computed.sort('posts', 'sortBy')
{{tumblr-blog posts=sortedPosts}}
MrChriZ commented 6 years ago

That's worked. Many thanks. I didn't have an understanding of controllers before - I have a better understanding now.