CODEWITHSUNDEEP
ember.jsbinding
Noor
Noor

Reputation: 20140

Binding values on controllers

I have two controllers, SidebarCategoriesController and MainLinksController. I have a property selectedCategory on SidebarCategoriesController and MainLinksController needs this property when rendering templates. 

App.MainLinksController = Ember.ObjectController.extend({
     needs: "sidebarCategories"
});

App.SidebarCategoriesController = Ember.ObjectController.extend({
    selectedCategory:2,
    actions: {
        setCategory: function (id){
            this.set('selectedCategory',id);
        }
    }
});

I also have a templete(below) whose controller is MainLinksController:

<script  type="text/x-handlebars" data-template-name="main_links">
 <h2 class="panel-title">All links:{{controllers.sidebarCategories.selectedCategory}}</h2>
</script>

The issue is that when selectedCategory is being updated in SidebarCategoriesController, the template which is using selectedCategory from MainLinksController via {{controllers.sidebarCategories.selectedCategory}} is not getting updated. How can i make the binding so that as soon as the selectedCategory changes in SidebarCategoriesController, {{controllers.sidebarCategories.selectedCategory}} also changes in the template ?

Upvotes: 0

Views: 48

Answers (1)

Kalman
Kalman

Reputation: 8121

I modified your jsbin to get it to work as follows:

App.CategoryManagerController = Ember.Controller.extend({
  selectedCategory: 5
});

App.SidebarCategoriesController = Ember.ObjectController.extend({
    needs: ['categoryManager'],
    selectedCategory: Ember.computed.alias('controllers.categoryManager.selectedCategory'),
    actions: {
        setCategory: function (){
            this.set('selectedCategory', 3);
        }
    }
});

App.MainLinksController = Ember.ObjectController.extend({
    needs: ['categoryManager'],
    selectedCategory: Ember.computed.alias('controllers.categoryManager.selectedCategory')
});

Full working solution here

Upvotes: 1

Related Questions