New Twiddle

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  needs: 'locations',
  buildNodes: function(nodeLen) {
    var i = 0;
    var nodes = [];
    while(i < nodeLen){
      nodes.pushObject(Ember.Object.create({
        id: i,
        name: 'nodes ' + i
      }));

      i++;
    }

    this.set('controllers.locations.model', nodes);
  },

  onInit: Ember.on('init', function() {
    this.buildNodes(2500);
    console.time('node-render');
  })
});

controllers.location-table-node.js

import Ember from 'ember';

export default Ember.Controller.extend({
  needs: 'locations',
  checked: false,
  locations: Ember.computed.alias('controllers.locations'),

  selected: Ember.computed('locations.selectedLocations.[]', 'model.id', function() {
    return this.get('locations.selectedLocations').contains(this.get('model.id'));
  }),

  setChecked: Ember.observer('model.checked', function() {
    this.set('checked', this.get('model.checked'));
    this.send('updateLocationHeirarchy');
  }),

  setCheckedBySelected: Ember.observer('selected', function() {
    if (!this.get('model').get('isDestroyed') && !this.get('model').get('isDestroying')) {
      this.set('model.checked', this.get('selected'));
    }
  }),

  actions: {
    toggleSelected: function() {
      this.set('checked', !this.get('checked'));
      this.send('updateSelectedLocation', this.get('model'), this.get('checked'));
    }
  },

  init: function() {
    var self = this;
    var currentParent;

    this.get('controllers.locations.model').toArray().reverse().forEach(function(location) {
      if (location.get('id') === currentParent && !self.get('model.storeName')) {
        if (location.get('location_type') === 30) {
          self.set('model.storeName', location.get('name'));
        } else if (!location.get('parent_uuid')) {
          self.set('model.storeName', self.get('model.name'));
        }
        currentParent = location.get('parent_uuid');
      } else if (!currentParent && self.get('model.parent_uuid')) {
        currentParent = self.get('model.parent_uuid');
      }
    });
    
		this.set('checked', this.get('selected'));
    this._super();
  }
});

controllers.locations.js

import Ember from 'ember';

export default Ember.Controller.extend({
  model: Ember.computed('', function() {
    return Ember.A([]);
  }),
  selectedLocations: Ember.A([])
});

helpers.timer.js

import Ember from 'ember';

export function timer(params/*, hash*/) {
  if(params[1] === 'end') {
    return console.timeEnd(params[0]);
  }
  return console.time(params[0]);
}

export default Ember.Helper.helper(timer);

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}

  {{#each controllers.locations.model as |node|}}
	{{render 'location-table-node' node}}
  {{/each}}

<br>
<br>

templates.location-table-node-item.hbs

{{yield}}
{{node.name}}

templates.location-table-node.hbs

{{#view 'location-table-node-item' classNames="location-table__node" classNameBindings=":/ selected:is-checked"}}
  <td class='location-table__checkbox'>
    <label>{{input type="checkbox" checked=selected}}<span></span></label>
  </td>
  <td class='location-table__location-name'>{{model.name}}</td>
  <td class='location-table__store-name'>{{model.storeName}}</td>
{{/view}}

twiddle.json

{
  "version": "0.10.3",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "1.10.1",
    "ember-template-compiler": "1.10.1"
  },
  "addons": {}
}

views.location-table-node-item.js

import Ember from 'ember';

export default Ember.View.extend({
  node: null,
  didInsert: Ember.on('didInsertElement', function() {
    console.timeEnd('node-render');
  }),
  tagName: 'tr',
  draggable: false,

  click: function() {
    this.get('controller').send('toggleSelected');
    return false;
  }
});