mardi 31 mars 2015

Ember: When child controllers are observing same property of Parent controller firing request simultaneously

I have created an application with two child object controller and a parent array controller. The route is also described in the same way.





var App = Ember.Application.create({
LOG_TRANSITIONS: true
});

App.Router.extend(function() {
this.resource('parent', function() {
this.route('child1', {
path: '/'
});
this.route('child2');
});
});

var ParenteRoute = Ember.Route.extend({
model: function() {
//Got my model from here.
};
});

var Child1Route = Ember.Route.extend({
model: function(){
return Ember.$.ajax('dummyUrl.com');
},
action:{
refreshData: function(){
var controller = this.controllerFor('parent.child1');
return Ember.$.ajax('dummyUrl.com').then(function(response){
return controller.send('updateModel' response);
});
}
}
});

var ParentController = Ember.ArrayController.extend({
getFirstName: function() {
return this.get('model').get('firstName');
},
getLastName: function() {
return this.get('model').get('lastName');
}
});

var Child1Controller = Ember.ObjectController.extend({
needs: ['ParentController'],
getName: function() {
return this.get('controllers.ParentController.getFirstName')
},
updateName: function() {
this.send('refreshData');
}.observes('controllers.ParentController.getLastName'),
actions: {
updateModel: function(response) {
this.set('getName', response);
}
}
});

var Child2Controller = Ember.ObjectController.extend({
needs: ['ParentController'],
getFirstName: Ember.computed.alias('controllers.ParentController.getFirstName')
});



<!--Parent Template--!>
<div>
<input type='text' {{bind-attr value=getFirstName}}>
<input type='text' {{bind-attr value=getLastName}}>
</div>
{{#link-to 'parent.child1'}}child1{{/link-to}}
{{#link-to 'parent.child2'}}child2{{/link-to}}
{{outlet}}

<!--child1 template--!>

<div>
{{getName}}
</div>

<!--child2 template--!>

<div>
{{getFirstName}}
</div>



So the problem with the above code is that when I am in the index of parent controller then on change of getLastName property every time child1's function updateName() is called and is executed properly. But after doing some changes while keeping child1 route active if a move to child2's route by clicking on the link to, then when I change the property getLastName, though I am in child2, child1's updateName() function is also getting triggered because of the observes function and throwing the error:



Uncaught Error: Nothing handled the action 'refreshData'. If you did handle the action, this error can be caused by returning true from an action handler in a controller, causing the action to bubble.


I need help in understanding how I can tackle this problem. And is this method of reloading the model in a child up on a change in the parent controller's property is a good way, if not then please suggest the right way of doing it.





Aucun commentaire:

Enregistrer un commentaire