2014-11-10 7 views
1

Я следующую структуру:Expose данные Polymer родительского элемента на дочерний элемент

<main-container data-endpoint="/api/allrecent"> 
    <section> 
    <list-container data-source="{{feed.recent}}" data-type="member" data-title="Recent Members"></list-container> 
    </section> 
</main-container> 

Где в main-container.js я выборки данных с Promise, как:

var self = this; 
connector.get(this.dataset.endpoint) 
.then(function(data) { 
    self.feed = JSON.parse(data); 
}); 

Теперь, я хотел бы выставить self.feed в list-container в качестве источника данных. Это означает, что когда Promise будет разрешено, он заполнит содержимое списка-контейнера.

Я просто обеспокоен доступом к корму внутри list-container. Я прочитал некоторые ответы SO и документацию Polymer, но не нашел подходящего способа достижения этого.

Решение, вероятно, прост (как один атрибут для привязки), но не нашел его.

ответ

1

Если вы хотите использовать связывание, вам понадобится элемент Polymer или тег <auto-binding> с моделью, которая обертывает ваш элемент <main-container>.

<polymer-element name="some-element" attributes="feed"> 
    <template> 
    <main-container data-endpoint="/api/allrecent" feed="{{feed}}"> 
     <section> 
     <list-container data-source="{{feed.recent}}" data-type="member" data-title="Recent Members"></list-container> 
     </section> 
    </main-container> 
    </template> 
</polymer-element> 

Теперь вы можете связать атрибут из <main-container> и <list-container> к тому же атрибуту в <some-element>.

+1

Да, проблема, похоже, в структуре. Элементы 'list-container' не являются частью Shadow DOM' main-container', но являются братьями и сестрами. Это устранило проблему, частично благодаря вашему ответу. Я, вероятно, должен расширить 'main-container' для создания, например. 'recent-container' и т. д. – zvona

Смежные вопросы