2013-12-03 5 views
5

У меня есть приложение my-app в качестве основного приложения в файле index.html и использует model.dart как свою модель, которая является моей моделью приложения.Как получить доступ к родительской модели из полимерного компонента

У моего приложения есть мой компонент в его содержании. Когда пользователь взаимодействует с моим компонентом, мне нужно обновить значения в файле model.dart.

<my-app> 
    <my-component></my-component> 
</my-app> 

один подход, я думал, что это доступ к моему-приложение в моем-компонентной файле дротика и использовать его свойство модели для доступа model.dart.

Это правильный подход к модели доступа приложения? Также как получить мое приложение из моего компонента?

ответ

6

Я хотел бы представить, что наличие дочернего компонента имеет осознание его родителя не является особенно хорошим образцом.

Но вы правы, часто то, что происходит в дочернем компоненте, меняет значение в родительском или в модели, связанной с родителем. В таких случаях я обнаружил, что ребенок может отправить событие, и родитель может выбрать взаимодействие с этим событием по своему усмотрению.

Диспетчерская событие так просто, как делать следующее (это class MyComponent):

dispatchEvent(new CustomEvent('foo')); 

И родители могут слушать к этому событию, как это:

<my-app> 
    <my-component on-foo="{{someMethodOnTheParent}}"></my-component> 
</my-app> 

В действительности, ребенок просто передает, что что-то произошло, но не контролирует, как (или даже если) отвечает родитель. Если <my-component> используется другим родителем, что родитель может выбрать, чтобы ответить на пользовательское событие по-другому:

<another-element> 
    <my-component on-foo="{{someOtherMethod}}"></my-component> 
</another-element> 

Функция обратного вызова, который срабатывает в родитель может сделать что угодно, в том числе изменения модели.

Надеюсь, что это поможет.

+0

Спасибо за ваш ответ. – user1848653

+0

Я согласен с вашим комментарием по шаблону проектирования, но необходимо вызвать компонент, чтобы выполнить некоторую работу и вернуть результаты вызывающему.Я пытаюсь создать систему медицинских записей и есть компонент поиска пациентов, который пользователь использует для поиска пациента, и результат возвращается в основное приложение. Я использовал ваше предложение, но немного изменился. – user1848653

+0

my-component создается динамически, поэтому я не могу зарегистрировать обработчик событий в HTML. Вместо этого я определил функцию в моем компоненте, которая принимает функцию в качестве параметра, а в моем приложении после создания моего компонента я устанавливаю функцию, выполняемую в моем компоненте. – user1848653

1

Дарта Полимер> = 1.0.0-х новый PolymerDom (это) .parentNode

Смотрите также https://www.polymer-project.org/1.0/docs/devguide/local-dom.html

Дарта Полимер < = 0.16.x

@ShailenTuli является право на инкапсуляцию не должно быть нарушено.

Но также элементы JS Polymer обеспечивают доступ к родительскому элементу в элементах компоновки, поскольку в некоторых сценариях все еще удобно.

Теперь это работает и в PolymerDart.

(this.parentNode as ShadowRoot).host 
Смежные вопросы