Positioning the Newly Added Contact

Learn how to change the order in collection view using attachHtml function.

So far, we've added the “New Contract” button including the functionality. Let’s add one last touch. We’d like to add the new item view at the top of the list instead of it being appended at the bottom.

Positioning the new item at the top

Collection views define an attachHtml function that is used to determine how child views should be added to their container. They are appended by default. We’d like to have this new view prepended. However, we can’t just override attachHtml in the view definition, because then our entire list of contacts would be displayed in reverse order. Instead, we want to define attachHtml only after the entire collection has been displayed. A good way to achieve this is to override the function once the view’s collection has been rendered because, at that point, all the child views would have been inserted in the proper order. This is how we do it:

Get hands-on with 1200+ tech skills courses.