A chosen.js select filled via Ember.js

We have a lot of chosen in our ember app, and extracted this superclass to make interaction with them easier, it takes care of refreshing/filling/selecting stuff.

// fix chosen picks up ember script tags -> weird output when search for t or i
// this breaks the bindings within the options tags
// works around https://github.com/harvesthq/chosen/issues/581
App.UnboundSelectOption = Ember.SelectOption.extend({
  template: Ember.Handlebars.compile('{{unbound label}}')

App.ChosenSelect = Ember.Select.extend({
  chosenOptions: {},

  template: Ember.Handlebars.compile(
    '{{#if prompt}}{{unbound prompt}}{{/if}}' +
    '{{#each content}}{{view App.UnboundSelectOption contentBinding="this"}}{{/each}}'

  didInsertElement: function(){

  _closeChosen: function(){
    // trigger escape to close chosen
    this.$().next('.chzn-container-active').find('input').trigger({type:'keyup', which:27});

  rerender: function(){
    if(this.get('state') == 'inDOM'){
     // remove now disconnected html

  rerenderChosen: function() {

Displaying collections and sorting them with ember-data

We had a lot of pain sorting our collections, since they are not there when the page is opened you need to continually re-sort…

App.Controller.Events = Ember.ArrayController.extend({
    init: function() {
      Helper.assignSortedCollection(this, 'content', Oceans.store.findAll(Oceans.Model.Event), function(item){
        return -1 * item.get('created_at').getTime();

Helper = {
  assignSortedCollection: function(to, path, items, sorter){
    items.addObserver('length', function(){
      var temp = Ember.A();
      this.forEach(function(item) { temp.pushObject(item); });
      to.set(path, _(temp).sortBy(sorter));

Save & validation callbacks for ember-data/ember.js

You want to do something when your record got saved/validations failed.


user.observeSaveOnce(success: function(){
  // go to next page
}, error: function(){
  // show validation errors


  # your model.js 
  observeSaveOnce: function(options) {
    function callback() {
      var outcome = 'success';
      if (this.get('isDirty')) {
        if (this.get('isValid')) return; // not submitted yet
        outcome = 'error';

      (options[outcome] || Ember.K).call(this);

      this.removeObserver('isDirty', callback);
      this.removeObserver('isValid', callback);

    this.addObserver('isDirty', callback);
    this.addObserver('isValid', callback);