Metaprogramming Magic with arrays and the ember get helper addon
Published on Apr 11, 2015
It's easy to hand-code your markup for every column in a table... but it's not always the right choice. Especially when you want to be able to easily change things later.
Today we use metaprogramming (and a sweet ember addon) to make it easy to add columns to our table- and unlock crazy new abilities that we'll use in episodes 29 and 30.
Preview of Awesomeness
In the next couple screencasts, we're going to make something really awesome. Let me show you. Let's say that you're wanting to show these posts, but you don't really care when they're updated. That's fine. You also don't care who the author is. That's cool too. Oh, and you want to display created before the title. Yeah, we can do that. Best of all, it's all in the URL, so you can keep your settings.
I show you this at the start because we're going to have put in a little bit of work before we get to the cool parts, and I don't want you giving up part way through. So let's get started.
Abstract the Columns
When we go to the template, we'll want to replace the headers and the body. Let's start with the header. We'll loop through each of the columns and set the title as the column title, and then the sort property as the column property. Then, selected sorts and is ascending will be the same as before. With that, we can delete the hard-coded ones. Let's check and make sure, and it is still displaying like before.
Now we'll pull the same trick with the data display, but it's going to be a little bit harder, as you can see, because all of these are much less homogeneous than the sortable headers are. We start off with our each loop, but then we have a little bit of a problem because we can't just do post.author, like we could down here, because each of these columns is going to have a different property they want to call, and that property is stored on column.property, but that won't work either because then post is going to look for a column property on itself.
Luckily, there's an ember add-on for this, ember-get-helper from Jane Murphy. I've already installed the add-on, so we can just use it here, get, and then the object, and then the key, the dynamic key. Let's go ahead and surround this by a TD, and then remove the previous things. When we check, we can see that it's working just like before, but the date isn't formatted quite like we would want, so let's go ahead and fix that.
We have our format date helper, however, we only want to apply it to dates. Luckily, we have our display property, so we can use that. We can check to see what the display property is, and display based on that, and we go back and we see that our dates are much more readable while still not processing the author and title as dates.
A Hint of Awesome
So far in this episode, we've dried up some code and made it a little bit easier to read, but we haven't really done anything powerful yet. Now let me show you how to add a column. That's all you have to do. It's that easy to add columns, whereas before, we would have had to add several rather long lines. It also paves the way for the amazing things we're going to be doing in the next episode, so join us in this week's Pro episode as we learn how to toggle columns at will, and then save that information in the URL. I'll see you soon.
- Sorting Tables with SortableMixin
- Sort Arrows (and refactoring into a component)
- highlight selected sort options
- query params
- Handlebars Subexpressions
- Client-side Pagination Part 1-Basics
- Client-side Pagination Part 2-Previous/Next Page Buttons, Change Page Size
- Metaprogramming Magic with arrays and the ember get helper addon
- Dynamic Toggling of Tables
- Rearranging Table Columns
- Handlebars Subexpressions
- Sorting in Ember 2.0 (Replacing SortableMixin)