在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密切跟蹤變化。