computed-buffer

application.controller.js

import Ember from 'ember';
import { buffer } from 'demo-app/utils/cp-macros';

export default Ember.Controller.extend({
  appName:'Ember Twiddle',
  
  email: 'example-1@gmail.com',
  
  emailBuffer: buffer('email'),
  
  actions: {
    apply() {
      Ember.Logger.log('applyying');
			Ember.Logger.log(this._cpbuffers);
			this.applyComputedBuffers();      
    },
    reset() {
      Ember.Logger.log('resetting');
			Ember.Logger.log(this._cpbuffers);
			this.resetComputedBuffers();      
    }
  }
  
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
<p>
{{input value=email}} {{email}}
</p>
{{input value=emailBuffer}} {{emailBuffer}}
<p>
<button onclick={{action "apply"}}>Apply</button>
</p>
<button onclick={{action "reset"}}>Reset</button>
<br>
<br>

twiddle.json

{
  "version": "0.4.17",
  "EmberENV": {
    "FEATURES": {}
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember.debug.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/2.2.0/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.2.0/ember-template-compiler.js"
  }
}

utils.cp-macros.js

import Ember from 'ember';
const { computed } = Ember;

var obj = {};

export function buffer(prop) {
  console.log(prop);
    var read = true;

    console.log(this);

    return computed(prop, {
      get(key) {
        Ember.Logger.log('GETTING');
        if (!this._cpbuffers) {
          this._cpbuffers = {};
        };

        if (!this.applyComputedBuffers) {
          this.applyComputedBuffers = applyBuffers(this);
        }
        
        if (!this.resetComputedBuffers) {
         	this.resetComputedBuffers = resetBuffers(this); 
        }

        return read ? this.get(prop) : this._cpbuffers[key].value;
      },
      set(key, value) {
        Ember.Logger.log('SETTING');
        this._cpbuffers[key] = this._cpbuffers[key] || {};
        this._cpbuffers[key].reads = prop;
        this._cpbuffers[key].value = value;

        if (read) {
          console.log(`setting cacche ${this.get(key)}`)
          this._cpbuffers[key].cache = this.get(key);
          read = false;
        }
        
        console.log(this._cpbuffers[key]);
        
        return value
      }
    });
}
  
function applyBuffers(obj) {

  return function(...props) {
    let propsToSet = {};
    props = props.length ? props : Object.keys(obj._cpbuffers);

    props.forEach(prop => {
      let key = obj._cpbuffers[prop].reads;
      let val = obj._cpbuffers[prop].value;

      propsToSet[key] = val;
    });


    obj.setProperties(propsToSet);
  }
}

function resetBuffers(obj) {

  return function(...props) {
    let propsToSet = {};
    props = props.length ? props : Object.keys(obj._cpbuffers);

    props.forEach(prop => {
      let key = obj._cpbuffers[prop].reads;
      let val = obj._cpbuffers[prop].cache;

      propsToSet[key] = val;
      propsToSet[prop] = val;
    });


    obj.setProperties(propsToSet);
  }
  
}