Series: Tables of Data

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

The first bit of work we'll have to do is abstract the columns. Right now, you can see all 4 of them are hard-coded, both in the header and in the body, so let's move that array to our JavaScript. Here we have the available columns array, and it has important information like the title and the property, as well as the way we want it to be displayed. It's different for plain text versus a date because we'll want to do some processing on the date. Then we have columns, which right now is just an alias for available columns, but will be much more later on.

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, 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, 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.

Tables of Data

Subscribe to our mailing list