Data binding from parent to component

1

i have just started learning ember 1 week ago, and i’m little confused about data-biding :

  • i have index controller that have a foor property,
  • test-component that have a its bar property comming from the index controller foo property

index

index.hbs // template

parent value  : {{foo}}

{{test-component bar=foo }}

index.js // controller

import Ember from 'ember';

export default Ember.Controller.extend({
  foo: "",
});

test-component // template

child value {{bar}}

test-component // component

import Ember from 'ember';

let TestComponent = Ember.Component.extend({
});

TestComponent.reopenClass({
  positionalParams: ['bar'],
});

export default TestComponent;

what confuse is :

  1. if write the component in my index template as {{test-component foo}} , i get only one-way data-binding, that mean if i change the bar property in the component, the foo property don’t change.

  2. if i use a {{input value=bar}} inside my component, i can see that both bar and foo get updated, so bar is binded to both foo and input value component ?? how its is working(PS : as i said in question 1, foo get updated only if i write in my index template {{test-component bar=foo}}

and thanks everyone.

2

If you use positionalParams your index should look like:

parent value : {{foo}}

{{test-component foo }}

Or you could remove the positionalParams in your test-component, should work then

Take a look here:

3

This is a bug in ember < 2.9 Positional parameters for components have two way binding in 2.9.0-beta · Issue #14408 · emberjs/ember.js · GitHub