New Twiddle

components.address-form.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: 'form',
  address: null,
  updateAddress: function() {},
});

components.person-details.js

import Ember from 'ember';

export default Ember.Component.extend({
  
  personService: Ember.inject.service(),
  
  key: null,
  
  person: Ember.computed('key', function() {
  	return this.get('personService').getLiveData(this.get('key'));
  }),
  
  // Address form
  
  addressForm: Ember.computed('person.id', function() {
  	return Ember.Object.create({});
  }),
  
  updateAddressForm(field, value) {
  	this.get('addressForm').set(field, value);
  },
  
  submitAddressForm() {
    console.log(this.get('addressForm'));
  },
  
});

controllers.application.js

import Ember from 'ember';

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

services.activity-service.js

import Ember from 'ember';

export default Ember.Service.extend({
	
  getLiveData(key) {
    const promiseProxy = ObjectPromiseProxy.create({
      promise: doRequest(key),
      startUpdates() {
        console.log('starting updates');
        this._interval = setInterval(function() {
          promiseProxy.incrementProperty('count', 1);
        }, 1000);
      },
      destroy() {
        console.log('stoping updates');
      	clearInterval(this._interval);
      }
    });
    promiseProxy.then(function() {
    	promiseProxy.startUpdates();
    });
    return promiseProxy;
  }
});

const doRequest = function(key) {
  return new Ember.RSVP.Promise(function(resolve, reject) {
    setTimeout(function() {
      if (key === 1) {
        resolve({ name: `Harry`, count: 0 });
      } else if (key === 2) {
        resolve({ name: `John`, count: 0 });
      } else {
      	reject(`Couldn't find record`);
      }
    }, 1000);
  });
};

services.person-service.js

import Ember from 'ember';

const ObjectPromiseProxy = Ember.ObjectProxy.extend(Ember.PromiseProxyMixin);

export default Ember.Service.extend({
  
  cache: Ember.computed(function() { return {}; }),
  
  getLiveData(key) {
    const cache = this.get('cache');
    const cached = cache[key];
    if (cached) {
    	return cached;
    }
    
    const promiseProxy = ObjectPromiseProxy.create({
      promise: doRequest(key),
      startUpdates() {
        this._interval = setInterval(function() {
          Ember.run(function() {
            console.log(`updating ${promiseProxy.get('name')}`);
            promiseProxy.incrementProperty('count', 1);
          });
        }, 1000);
      },
      destroy() {
      	clearInterval(this._interval);
      }
    });
    promiseProxy.then(function() {
    	promiseProxy.startUpdates();
    });
    
    cache[key] = promiseProxy;
    return promiseProxy;
  }
});

const doRequest = function(key) {
  return new Ember.RSVP.Promise(function(resolve, reject) {
    setTimeout(function() {
      if (key === 1) {
        resolve({ id: 1, name: `Harry`, count: 0 });
      } else if (key === 2) {
        resolve({ id: 2, name: `John`, count: 0 });
      } else {
      	reject(`Couldn't find record`);
      }
    }, 1000);
  });
};

templates.application.hbs

<button {{action (mut key) 1}}>Harry</button>
<button {{action (mut key) 2}}>John</button>
<button {{action (mut key) 3}}>James (404)</button>
<br>
<br>
<div>
  {{#if key}}
    {{person-details key=key}}
    <button {{action (mut key) null}}>Hide</button>
  {{else}}
    Select a record above
  {{/if}}
</div>

templates.components.address-form.hbs

<label>New address:</label>
<input value={{address.line1}} oninput={{action (mut address.line1) value="target.value"}}/>
<input value={{address.line2}} oninput={{action (mut address.line2) value="target.value"}}/>

templates.components.person-details.hbs

{{#if person.isPending}}
  Loading...
{{else if person.isRejected}}
  {{person.reason}}
{{else}}

  <div>Person details: {{person.name}} {{person.count}}</div>
  
  {{address-form address=addressForm
    onUpdate=(action updateAddressForm)
    onSubmit=(action submitAddressForm)
  }}
  
{{/if}}

twiddle.json

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