title: Finding a component and changing its property in Ember.js
body: <p>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}}
      </p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="components/my-name"&gt;
  Hi, my name is {{name}}.
  &lt;/script&gt;
  
  var App = Ember.Application.create();
  App.IndexRoute=Ember.Route.extend({
  model:function(){
   return dummyNames;
  } 
  });
  var dummyName={[name='John', name='Jane', name='Jade']};
  </code></pre>
  
  <p>This code would display the names on the screen. Now I have another template called change. </p>
  
  <pre><code>&lt;script type="text/x-handlebars" data-template-name="change"&gt;
  &lt;button {{action 'changeNow'}}&gt;&lt;/button&gt;
  &lt;/script&gt;
  
  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?
          }
      }
  });
  </code></pre>