在Ember.js中查找组件并更改其属性

Question

我有一个模板，它为模型中的每条记录创建一个组件。我想查找一个组件并在运行时根据其他模板中的事件更新其某个属性。如何在DOM中找到插入的特定组件。 {{#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']}; 

该代码会在屏幕上显示的名字。现在我有另一个叫做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? 
     } 
    } 
}); 

Answer 1

这里是我为你准备的jsbin。

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

组件都有自己的范围。并且如果{{name}}显示在您的组件中，我假设您已在索引模板中呈现该组件。这意味着您已将该属性传递给组件。 像这样从引导

{{blog-post title=name}} 

passing properties to components

所以basicall你要修改的属性的IndexController的。

您可以直接修改IndexController属性（dummynames），并且由于数据绑定，更改将反映在您的组件中。

既然你想在不同的控制器中一起执行它，你将不得不在ChangeController中声明对IndexController的依赖。 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 

     } 
    } 
}); 

您可能要看看addArrayObserver密切跟踪变化。