Sortable Objects

help
1

In our app users can create multiple posts. These posts can have multiple images that are currently stored in an object in the Post collection. Each image has a url, a caption, and a rank.

Currently this is displayed using each and referencing the field that is the object:

{{#each postImages}} {{this.url}} {{/each}}

We want to be able to do three things:

  1. Display the object sorted by rank (0-10 etc).
  2. User can reorder object, affecting the rank in the database so it’s updated everywhere the images are called (galleries and profiles etc).
  3. When an image is deleted, reflect across ranks

How can we display an object on the age ordered by the rank ‘field’ (not the index)?

I want to create something similar to this which uses a collection:

Is it just better to create a collection of images and then reference the post Id? I wanted to denormalise as much as possible!

2

I had only a quick look at the referenced blog post. I personally wouldn’t use jquery-ui for such a simple task. There are smaller solutions out there that help implement drag & drop, if you need that, or maybe you can even do without that by using up/down buttons or whatever is appropriate for your UI.

But fundamentally here are the steps to one of the possible solutions:

  • either introduce a new field rank or keep all the elements to be ordered in one Array-type property (e.g. page.images)
  • do a server-side or client-side sort, either when querying through Mongo or in the postImages helper with Array.sort or _.sort
  • when user reorders, just either update the rank field values (all that are affected) or change the ordering in the array of items and save that back to the DB

… and that should be it. Does that help?

EDIT: Overlooked at first that you already have that rank field. My suggestion would be to simply drop that and use the array element order for the rank, if ordering is really all you need from the rank field. Keeps things simpler. An array is an ordered collection, after all.

1 Like
3

I was trying to find one of those simpler solutions, but somehow wasn’t successful. Do you mind sharing what you found?

4

Wow, my search-foo must have been off. I just found this which looks like it does what I need

1 Like
5

I think that one was also exactly the one that I had in mind, having used it some weeks ago! Glad you already found it!

6

Don’t use this package in a production application. It has a giant security whole. I notified the authors 4 months ago but they didn’t remove the incrimined code yet.

7

rubaxa:sortable is the solution.

I’ve just fixed the security hole @mquandalle mentioned; sorry for the delay, got caught up with quitting Google and starting iDoRecall.

3 Likes
8

Thanks everyone, my ideal situation is for the array order to be sortable, otherwise I have to deal with adjusting ranks if an image is deleted from the array.

@dandv and @jamgold any idea how to use sortable with an array of objects, and change the index?

9

@sgoudie: Reordering arrays is on the roadmap.