Binding Example 1

application.route.js

import Route from 'ember-route';

export default Route.extend({
  activate() {
    document.body.classList.add('standard');
  }
});

application.template.hbs

<header class="container-fluid">
  <h1>Ember Sandbox</h1>
</header>

<hr>

<main class="container-fluid">
	{{outlet}}
</main>

index.controller.js

import Controller from 'ember-controller';
import get from 'ember-metal/get';
import set from 'ember-metal/set';

export default Controller.extend({
  margin: {t: '0', r: '0', b: '0', l: '0'},
  
  actions: {
    updateMargin(direction, {target: {value}}) {
      set(this, `margin`, {...get(this, 'margin'), [direction]: value});
    }
  }
});

index.route.js

import Route from 'ember-route';

export default Route.extend({
  
});

index.template.hbs

<div>
	{{#ui-parent margin=margin as |dimensions|}}
  	{{ui-child dimensions=dimensions}}
  {{/ui-parent}}
</div>
  
<div class="form-group">
  <label for="mt">上：</label>
  <input id="mt" type="number" min=0 class="form-control"
  			 value={{margin.t}} oninput={{action "updateMargin" "t"}}>
</div>

<div class="form-group">
  <label for="mr">右：</label>
  <input id="mr" type="number" min=0 value={{margin.r}} class="form-control"
  			 value={{readonly margin.r}} oninput={{action "updateMargin" "r"}}>
</div>

<div class="form-group">
	<label for="mb">下：</label>
	{{input id ="mb" type="number" min=0 class="form-control"
  				value=margin.b}}
</div>

<div class="form-group">
	<label for="ml">左：</label>
	{{input id ="ml" type="number" min=0 class="form-control"
  				value=(readonly margin.l) input=(action "updateMargin" "l")}}
</div>

styles.app.css

*, *::before, &::after {
  box-sizing: border-box;
}

strong {
  color: red;
  font-size: 1.2rem;
}

twiddle.json

{
  "version": "0.10.5",
  "EmberENV": {
    "FEATURES": {},
    "EXTEND_PROTOTYPES": true
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.js",
    "hack": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/hack.css",
    "standard": "//cdnjs.cloudflare.com/ajax/libs/hack/0.7.7/standard.css",
    "ember": "2.9.0",
    "ember-data": "2.9.0",
    "ember-template-compiler": "2.9.0",
    "ember-testing": "2.9.0"
  },
  "addons": {
    "ember-composable-helpers": "*",
    "ember-route-action-helper": "*",
    "ember-truth-helpers": "*"
  }
}

ui-child.component.js

import Component from 'ember-component';

export default Component.extend({
});

ui-child.template.hbs

{{#each-in dimensions as |k v|}}
	{{k}}: {{v}}
{{/each-in}}

ui-parent.component.js

import Component from 'ember-component';
import computed from 'ember-computed';

export default Component.extend({
  dimensions: computed('margin.{t,r,b,l}', function() {
    const margin = this.get('margin');
    console.log(`changes detected by CP: `, margin);
    return {
      width: 800 - +margin.r - +margin.l,
      height: 450 - +margin.t - +margin.b
    }
  }),
  
  didReceiveAttrs() {
    console.log(`changes detected by didReceiveAttrs: `, this.get('margin'));
  }
});

ui-parent.template.hbs

{{yield dimensions}}