1

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

1 回答 1

0

这是我为你准备的一个jsbin。

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

组件有自己的范围。如果 {{name}} 显示在您的组件中，我假设您已在索引模板中呈现。这意味着您已将该属性传递给组件。指南中的类似内容

{{blog-post title=name}}

将属性传递给组件

所以基本上你要修改的属性都是IndexController的。

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

由于您想在所有不同的控制器中执行此操作，因此您必须在 ChangeController 中声明对 IndexController 的依赖。 管理依赖项

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 以密切跟踪更改。

于 2014-02-26T09:55:00.173 回答