raytiley

Ember's guides are pretty confusing on the loading substates. From the guides it seems that a transition will look up the route heiarchey until it finds a loading.hbs template. And display that. The caveat here is that it will only look up as high in the route heirachy as the root of the transition. This means that on initial load it will look up to the application loading template, but if your transition inbetween leaf routes, like say from edit bulletin to manage bulletins you won't find the application loading template, it will only search up on level to zones.

So its simple enough to add a loading template at every level, problem is it looks jank as hell since if you have multiple loading templates in a route transition, the animation will restart as each level resolves.

To work around this I removed the loading template and instead implemented the loading action in the application route. When this action is hit we set a timer via Ember.run.later to switch out the outlet with a loading animati

raytiley

import Ember from 'ember';
let called = 0;
export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  changingProp: 5,
  notChangingCp: Ember.computed('changingProp', function() {
  let prop = this.get('changingProp');
  // Simulate calc that doesn't end up changing.
  return 10;
}),

raytiley

var FastBootServer = require('ember-fastboot-server');
var express = require('express');

var server = new FastBootServer({
  distPath: '../fastboot-dist'
});

var app = express();

app.get('/*', server.middleware());

raytiley

import Ember from 'ember';

export default Ember.Component.extend({
  anInt: 10,
  didInsertElement() {
    this._super(...arguments);
    this.set('_cancel', Ember.run.later(this, 'updateObj', 1000));
  },
  willDestroyElement() {
    this._super(...arguments);

raytiley

export default {
  add(array, item) {
    return array.concat([item]);
  },

  remove(array, item) {
    return array.filter((i) => {
      return i !== item;
    });
  }

raytiley

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
});

raytiley

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  todos: Ember.computed(function() {
    return [];
  }),
  
  actions: {
   add: function() {

raytiley

import Ember from 'ember';

Ember.onerror = function() { alert('trolololololol'); };

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  actions: {
    troll: function() {
     this.haha(); 
    }

raytiley

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  valueUndefined: undefined,
  valueNull: null,
  valueFalse: false,
  
  value1: Ember.computed('valueUndefined', {
    get: function() {

raytiley

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});