Поиск компонента и изменение его свойства в Ember.js

У меня есть шаблон, который создает компонент для каждой записи в модели. Я хочу найти компонент и обновить одно из его свойств во время выполнения на основе события из другого шаблона. Как найти конкретный компонент, вставленный в 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?
        }
    }
});

ember.js ember-controllers
person Pranava Sheoran    schedule 26.02.2014    source источник
comment
где вы показываете свой компонент? какой шаблон? {{Мое имя}}   -  person Rigel    schedule 26.02.2014

Ответы (1)


arrow_upward
0
arrow_downward

вот jsbin я подготовил для вас.

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

Компонент имеет свою собственную область видимости. и если в вашем компоненте отображаются {{name}}, которые, как я предполагаю, вы отобразили в шаблоне индекса. это означает, что вы передали это свойство компоненту. что-то вроде этого из руководства

{{blog-post title=name}}

передача свойств компонентам

Таким образом, все свойство, которое вы хотите изменить, относится к IndexController.

Вы можете напрямую изменить свойство IndexController (dummynames), и изменение будет отражено в вашем компоненте из-за привязки данных.

Поскольку вы хотите сделать это на разных контроллерах, вам придется объявить зависимость от IndexController в ChangeController. Управление зависимостями

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, чтобы внимательно отслеживать изменения.

person Rigel    schedule 26.02.2014