Finding a component and changing its property in Ember.js

Question

I have a template which creates a component for every record it has in the model. I want to find a component and update one of its property at runtime based on an event from some other template. How to find a particular component inserted in the DOM. {{#each}} {{my-name}} {{/each}}

<script type="text/x-handlebars" data-template-name="components/my-name">
Hi, my name is {{name}}.
</script>

var App = Ember.Application.create();
App.IndexRoute=Ember.Route.extend({
model:function(){
 return dummyNames;
} 
});
var dummyName={[name='John', name='Jane', name='Jade']};

This code would display the names on the screen. Now I have another template called change.

<script type="text/x-handlebars" data-template-name="change">
<button {{action 'changeNow'}}></button>
</script>

App.ChangeController=Ember.Controller.extend({
    actions:{
        changeNow:function(){
           //Here I want to find the component where the name is Jane and change it to Kate. How         to do this?
        }
    }
});

where are you displaying your component? which template? {{my-name}} — Rigel, Feb 26 '14 at 09:39

Rigel · Accepted Answer · 2014-02-26T10:30:36.140

here is a jsbin i prepared for you.

http://emberjs.jsbin.com/sanukoro/3/edit

Component has its own scope. and if the {{name}} are displayed in you component which I assume you have rendered in index template. that means you have passed that property to the component. something like this from guide

{{blog-post title=name}}

passing properties to components

So basicall the property you want to modify is of IndexController.

You can directly modify the IndexController property(dummynames) and the change will be reflected in you component because of data bindings.

Since you want to do it in al together different controller you will have to declare dependency on IndexController in ChangeController. Managing dependencies

App.ChangeController=Ember.Controller.extend({
    needs: ['index'] //dependency
    names: Ember.computed.alias("controllers.content") //now get properties of Index controller
    actions:{
        changeNow:function(){
          //here you can find name jane and replace it with to kate

        }
    }
});

You may have to look at addArrayObserver to track changes closely.

Finding a component and changing its property in Ember.js

1 Answers1