CODEWITHSUNDEEP
javascriptember.jscontrollerparent
cocheese
cocheese

Reputation: 512

Ember.js: Update parent template property

Ey guys I got a simple question about changing a property inside a parent template. The code that I written is stated below:

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

This router creates the following routes:

Below are my templates (simplified)

<script type="text/x-handlebars" data-template-name="application">
{{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="parent">
  <h1>{{title}}</h1>

  Common html

  {{outlet}}
</script>

<script type="text/x-handlebars" data-template-name="parent/index">
  Parent specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child1">
  Child 1 specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child2">
  Child 2 specific content
</script>

<script type="text/x-handlebars" data-template-name="parent/child3">
  Child 3 specific content
</script>

And here are my controllers 

App.ParentController = Ember.Controller.extend({
  title: 'Parent Title'
});

App.ParentIndexController = Ember.Controller.extend({
  title: 'Parent Index Title'
});

App.Child1Controller = Ember.Controller.extend({
  title: 'Child 1 Title'
});

App.Child2Controller = Ember.Controller.extend({
  title: 'Child 2 Title'
});

App.Child3Controller = Ember.Controller.extend({
  title: 'Child 3 Title'
});

How can I update the {{title}} property inside template="parent" when I'm inside a child controller? I've tried something like this

App.Child3Controller = Ember.Controller.extend({
  needs: ['parent'],
    init: function() {
    this.get('controllers.parent').set('title', 'Child 3 Title');
  }
});

But I does not update the parent template. So how do I accomplish this?

Upvotes: 2

Views: 1807

Answers (2)

cocheese
cocheese

Reputation: 512

Guys thanks for all the reply's! You guys gave me a idea and it solved my question :) Check it out here jsbin.com/AhOT/3 As you can see I took another way to solve it ;)

Upvotes: 0

intuitivepixel
intuitivepixel

Reputation: 23322

Ok, editing my answer after your comment, the problem you are facing is that init from Child3Controller is not called the time you need it, so for this to work you should do it in your parent.child3 route setupController hook:

App.ParentChild3Route = Ember.Route.extend({
  setupController: function(controller, model) {
    // the Ember.run.later is not necessary and is only to simulate a delay 
    // so you can actually see the title change, it would be actually
    // just fine to call this.controllerFor('parent').set('title', 'Child 3 Title');
    // directly when the setupController hook is invoked
    Ember.run.later(this, function() {
      this.controllerFor('parent').set('title', 'Child 3 Title');
    }, 1500);
  }
});

I'm also redirecting to the parent.child3 route from the index route to make the setupController hook actually fire, but this could happen also by simply navigating to the parent.child3 route in any other way:

App.IndexRoute = Ember.Route.extend({
  afterModel: function() {
    this.transitionTo('parent.child3');
  }
});

So to conclude, changing values in a controller should be done in the setupController hook of the controller corresponding route.

I've tried to simulate this in a simple demo, have a look.

Hope it helps.

Upvotes: 3

Related Questions