melreams.com

Nerrrrd

Ember tip of the day

in development, ember, javascript, tip of the day

Lately I’ve been working with Ember components, which are really pretty cool. For anyone who doesn’t know, in Ember components let you encapsulate layout and functionality neatly together so you can reuse things all over your app without making a huge mess.

Ember components have a lifecycle you should know about and a set of lifecycle hooks you can call. Those hooks are really handy, they let you do all kinds of things at different points in the component’s lifecycle. Be warned, though: you MUST call

this.super()

at the beginning of your lifecycle hook or your component will break in deeply weird ways. When you implement a lifecycle hook in your code, you’re actually overriding a method in the base Ember component. If you don’t call this.super(), the original function doesn’t get called and shockingly enough, it does a bunch of things that are necessary to make your component work right :)

Because Ember is open source, you can go have a look at what the base lifecycle functions do. Here’s the init function, which calls this.super() itself before it does the rest of its setup. Reading the code yourself totally isn’t necessary, but it’s interesting and might help you remember why it’s so important to call this.super().

Ember tip of the day

in ember, facepalm, tip of the day

If you happen to find some example code that elegantly solves your exact problem, check which version of Ember it uses. Sometimes that perfect example is a few versions ahead and will do absolutely nothing for you. If you’re smarter than I am and check the version number right away, you can save yourself a good half hour of cleaning, rebuilding, and cursing.

On the upside, if you need to iterate over a map with {{#each foo in bar}}, you can hammer together a workaround using Ember.keys(map) – but again, only if you have the right version of ember. Ember.keys() was deprecated in 1.13, use Object.keys() instead if your version of Ember is later than 1.13.

 

Ember tip of the day

in ember, tip of the day

If you use Ember.js and you need to update one element of an array inside you rmodel, you need to use the .replace() method. Getting and updating your array will not work, neither will trying to use this.set(‘model.array[index]’). Ember won’t register your changes unless you call the .replace() method, so do that :)

And yes, I’m writing this blog post to remind myself, I spent a good hour or two earlier this week trying to figure out why Ember wouldn’t re-render anything when I tried to update part of my model.