Deewendra Shrestha
Deewendra Shrestha

Reputation: 2465

component not re-rendering when underlying model changes

I have a model data that is in hierarchical order. I am using a component to render the model data and another component to add data to the model. I am facing a problem where when I add a model data in root level, it renders correctly but when I try to add model data one level deep, the view doesn't get updated.

Here is a simple example that demonstrates my problem: http://jsbin.com/UhIdoxOR/1/

So if I add a question after root level question, the view gets updated. But if I try to add a question in child level then the view does not get updated. What can I do to make the appropriate component re-render when the model changes?

Thanks, Dee

Upvotes: 0

Views: 1057

Answers (1)

Marcio Junior
Marcio Junior

Reputation: 19128

In your QuestionController you have the hasChildren and childQuestions computed properties with property('questions'), but this is incorrect because hasChildren depends of childQuestions.length and childQuestion of [email protected] because of the filter. So you need to update to the following:

    App.QuestionController = Ember.ObjectController.extend({
        needs: 'questions',
        questions: Ember.computed.alias("controllers.questions"),

        hasChildren: function () {
            return (this.get('childQuestions.length') > 0);
        }.property('childQuestions.length'),

        childQuestions: function () {
            return (this.get('questions').filterBy('parentQuestionId', parseInt(this.get('id'))));
        }.property('[email protected]')
    });

Here is your updated jsbin http://jsbin.com/UhIdoxOR/3/edit

Upvotes: 1

Related Questions