Child component updating a property coming from query params via parent component

#1

I am using Ember 1.13.0 and trying to update a property coming from query params in a child component.

In child component js, when “time” is not defined, I am setting it to 1200. If i log the value of “time” (this.get(‘time’)) in child component, after i update it, i can see its value being updated. But its doesn’t get through to parent component action.

So, why I am not able to get its value in parent, if its getting updated in child?

Top level component:

{{parent-component time = model.params.incomingTime}}

Parent component:

<div>hello</hello>
{{child-component time=time}}

Parent component JS:

actions: {
 submit:function(){
  var t = this.get('time')
 }
}

Child component: <div>Time is {{currentTime}}</div>

Child component JS:

currentTime: function(){
 if(this.get('time')){
  return time;
 } else {
    this.set('time','1200');
    return '1200'
 }
}.property()

More info - Am upgrading ember from 1.11 to 1.13.0 and this code works fine in 1.11 but causes this issue in 1.13.0

#2

did you try to declare field time in Parent component JS ?

#3

If you use query params, then you can use Ember.js built in mechanism to setup default value and update values in that route.

As you see in this example:

Two-way binding version

  • setup queryParams in controller
  • provide a default value
  • the default value of time flows down in parent-component and after in child-component
  • the query params will be updated when you change the value in the input box

Two-way bindings automagically works, but in big application you don’t really want this behaviour. To avoid the automatic binding, you can add oneWay alias to parent-comonent, and send up the value with an action to the main route, which can deal with it in route handler.

One-way binding with actions up version

#4

Well, should there be a need for that. I am just wondering if I should do that.

And to add more info - I am actually upgrading ember from 1.11 to 1.13.0 and this code worked fine with 1.11. Not sure what causing this issue in 1.13

#5

Well, i kind of did that. I called an action from child component in parent component, where it actually updates this value. And I think its working. But its creating other issues for me in application. I am trying to figure that out.

But the question i have is, that is this is the right way to do this. As in, call the action in parent component and set prop there?