playing with immutable.js

components.my-child.js

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs(){
    this._super(...arguments)
    console.log('didReceiveAttrs', 'my-child')
  }
});

components.my-other-child.js

import Ember from 'ember';

export default Ember.Component.extend({
  internal: true,
  didReceiveAttrs(){
    this._super(...arguments)
    console.log('didReceiveAttrs', 'my-other-child')
  }
});

components.my-other-other-child.js

import Ember from 'ember';

export default Ember.Component.extend({
  didReceiveAttrs(){
    this._super(...arguments)
    console.log('didReceiveAttrs', 'my-other-other-child')
  },
  didRender(){
    this._super(...arguments)
    console.log('didRender')
  }

});

components.my-parent.js

import Ember from 'ember';

export default Ember.Component.extend({
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  data: Immutable.Map({
    a: Immutable.Map({"one": 1}),
    b: Immutable.Map({"one": 100})
  }),
  actions: {
    increment(){
      let oldB = Ember.get(this, 'data').get('b')
      let oldVal = Ember.get(this, 'data').getIn(['a', 'one'])
      let map = Ember.get(this, 'data').setIn(['a', 'one'], oldVal + 1)
      let newB = map.get('b')
      console.log('did I change b', oldB === newB)
      Ember.set(this, 'data', map)
    }
	}
    
  
  
});

helpers.i-get.js

import Ember from 'ember';

export function iGet(params/*, hash*/) {
  return params[0].get(params[1])
}

export default Ember.Helper.helper(iGet);

templates.application.hbs

<button {{action "increment"}}>Inc</button>
{{my-parent data=data}}
{{outlet}}
<br>
<br>

templates.components.my-child.hbs

{{i-get data "one"}}

templates.components.my-other-child.hbs

{{i-get data "one"}}
{{my-other-other-child internal=internal}}

templates.components.my-other-other-child.hbs

{{internal}}

templates.components.my-parent.hbs

{{my-child data=(i-get data "a")}}
{{my-other-child data=(i-get data "b")}}
{{yield}}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "beta",
    "ember-data": "2.8.0",
    "ember-template-compiler": "beta",
    "ember-testing": "beta",
    "immutable": "https://cdnjs.cloudflare.com/ajax/libs/immutable/3.8.1/immutable.min.js"
  },
  "addons": {}
}