New Twiddle

binding.js

import Em from 'ember'

export default Em.Object.extend({
  source: null,
	context: Em.computed.alias('source.source'),
  path: '',
  data: Em.computed('context', 'path', {
    get() {
      console.log('definition de l\'objet data');
      var _data = this.get('_data');
      if(_data) {
      	console.log('destruction ancien objet data');
      	_data.destroy();
      }
      var path = this.get('path');
      _data = Em.Object.extend({
        context: this.get('context'),
      	value: Em.computed('context.'  + path, {
        	get() { 
            console.log('va chercher valeur dans le context', this.get('context'), path);
          	return this.get('context.' + path);
          }
        }).readOnly()
      }).create();
      
      this.set('_data', _data);
      return _data;
    }
  }),
  value: Em.computed.alias('data.value')
})

controllers.application.js

import Ember from 'ember';
import Binding from '../binding'
import DataSource from '../data-source'

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  value: 'la valeur',
  
  
 	obsValue: Em.observer('binding.value', function() {
    	this.set('value', this.get('binding.value'));
  }).on('init'),
  
  init() {
  	this.set('binding', Binding.create({
      source: DataSource.create(),
      path: 'prop2.prop1'
    }));
    
    
    this.addObserver('binding.value',this, () => {
    	this.set('value', this.get('binding.value'));
    });
    
    console.log('value:', this.get('value'));
    
    setTimeout(() => {
     this.set('binding.context.prop2.prop1', 'coucou');
      console.log('value:', this.get('value'));
      
      setTimeout(() => {
     		this.set('binding.context.prop2', { prop1: 'le chat'});
      	console.log('value:', this.get('value'));
        
        setTimeout(() => {
     			this.set('binding.context', { prop2: { prop1: 'le chat machine', prop2: 'salut!'}});
      		console.log('value:', this.get('value'));

          setTimeout(() => {
            this.set('binding.path', 'prop2.prop2');
            console.log('value:', this.get('value'));
          }, 2000);

  			}, 2000);
        
  		}, 2000);
  }, 2000);
  }
});

data-source.js

import Em from 'ember'

export default Em.Object.extend({
	source: { prop1: 'prop1', prop2 : { prop1: 'prop2.prop1' , prop2: 'prop2.prop2' }}
})

templates.application.hbs

<h1>Welcome to {{appName}}</h1>
<br>
<br>
{{outlet}}
<br>
<br>
<p>
<b>value:</b>
{{value}}
</p>

twiddle.json

{
  "version": "0.13.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.16.2",
    "ember-template-compiler": "2.16.2",
    "ember-testing": "2.16.2"
  },
  "addons": {
    "ember-data": "2.16.3"
  }
}