When you are using a UI component from libraries like JQuery UI or Zurb Foundation, in order for that component to work properly, you need to enable it after DOM is ready.

An example of this is, in Zurb Foundation, the following needs to be called in order for your drop-down menu to function:

$(document).foundation('dropdown', 'reflow');

In a non-SPA world, this can be achieved by doing:

$(function(){
  //Gets called when DOM is ready. Easy Peazy!
  $(document).foundation('dropdown', 'reflow');
})

So how do we achieve the same thing in Ember SPA?

TL;DR

You have to create a view for your template!!! Ember (and/or Ember-cli), by convention, does not require you to have a view to render a template. UsersRoute, by default, will render users.hbs without needing UsersView. But, if you want to execute a JS after the template is rendered, so far, the only way that I’ve found is to create a UsersView.

This is how your UsersView would look like:

import Ember from 'ember';

var UsersView = Ember.View.extend({
  templateName: 'index', //we want to render 'users.hbs'

  didInsertElement: function(){ //Duh, obviously this is going to be called after element is inserted
    "use strict";
    $(document).foundation();
  }
});

export default UsersView;

TL;DR done

DOH!

I really should have known this! Especially after writing the last blog post. I found out about this the hard way after trying to run that code in:

  • An initializer. Obviously this is not going to work. This gets called when the app starts and the template would not be in DOM when this initializer gets called.

  • Route’s didTransition callback. Close but still no-go. The template won’t be in DOM when the function is called.

  • Ember.run.scheduleOnce('afterRender', this, function(){ /* Do stuff here */}). I tried this. I really think this should have worked. Still not to sure why it didn’t. If you know why, please let me know!

Thank you for reading. Hopefully, I saved you some time and agony.

Simple Slide Out Navigation Menu in iOS with Swift (Part 2)

Continuing from part 1, we are going to see how to switch the displayed view controller when one of the menu selections is tapped Continue reading

Subdomain with NGINX on Linode

Published on January 14, 2015