уголек связывания данных от родителя к ребенку

Question

я только начал изучать Ember 1 неделю назад, и я немного запутался о данных-выжидать:

• я есть index контроллер, имеют свойство foor,
• test-component, которые имеют свое свойство bar, поступающее из контроллера индекса foo свойства

---

индекс

index.hbs // шаблон

parent value : {{foo}} 

{{test-component bar=foo }} 

index.js // Контроллер

import Ember from 'ember'; 

export default Ember.Controller.extend({ 
    foo: "", 
}); 

тест-компонент // шаблон

child value {{bar}} 

тест-компонентный // компонент

import Ember from 'ember'; 

let TestComponent = Ember.Component.extend({ 
}); 

TestComponent.reopenClass({ 
    positionalParams: ['bar'], 
}); 

export default TestComponent; 

---

, что запутывать является:

1. если написать компонент в моем шаблоне индекса, как {{test-component foo}}, я получаю только один-способ связывания данных, что означает, если я изменить bar недвижимость в компонент, свойство foo не изменяется.

2. если я использую {{input value=bar}} внутри мой компонент, я могу видеть, что оба bar и foo обновляются, поэтому бар переплетен как к Foo и значения входного компоненту ?? как его работает (PS: как я сказал в вопросе 1, Foo обновляется только тогда, когда я пишу в моем шаблоне индекса {{test-component bar=foo}}

и благодарит всех

Answer 1

Update:. Поведение где позиционные параметры имеет односторонний связывания и именованные параметры имеют двухстороннее связывание был в версиях Поста < 2.9.0 bug.

причину, по которой контроллеру обновляются, когда вы передаете в названных параметрах и не тогда, когда вы проходите в позиционном параметр s - это то, что именованные параметры связаны, а позиционные параметры - нет.

I copied your example into an Ember Twiddle that illustrates the difference.

Answer 2

Лучше всего избегать двухсторонней привязки и полагаться на разделение двух действий. Это называется Data Down; Действия вверх.Для иллюстрации шаблона может выглядеть следующим образом:

{{test-component foo=bar update=(action (mut bar))}} 

Затем в test-component компоненты просто вызовите команду Обновить

this.get('update')(newValue); 

Таким образом обув не изменится, пока родитель не делает изменение (от (action (mut bar)) линия). Это отделяет заботу о том, кто владеет правдой.

Очевидно, что это эмпирическое правило, которое можно сломать (см. Помощники {{input}} на примере нарушения правила). Но вы должны знать, когда и почему ваше отклонение от счастливого пути при этом. Если вы намереваетесь написать все свои компоненты, чтобы не изменять данные, которые они даны, а вместо этого запускают действия, это упростит ваше заявление и поддержит ваше приложение.