Sync Polymer 1.0 Связывание данных между элементами

Question

Я пишу элемент Polymer для управления категориями продуктов. Внутри этого элемента находятся три других элемента для: loading categories, adding categories и элемент breadcrumb для управления глубиной категории.

Каждый элемент предоставляет свойства, которые совместно используют данные между ними. Например, когда достигнут новый уровень категории, он отправляет имя и идентификатор категории в элемент breadcrumb.

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

<dom-module id="category-manager"> 

<style> 
    :host{ 
     display: block; 
    } 
</style> 

<template> 

    <h1>Category Manager</h1> 

    <category-breadcrumb parent-category="{{parentCategory}}" parent-name="{{parentName}}"></category-breadcrumb> 

    <category-add url="/api/category" parent-id="{{parentCategory}}"></category-add> 

    <category-loader url="/api/category" parent-category="{{parentCategory}}" parent-name="{{parentName}}"></category-loader> 

</template> 

<script> 

Polymer ({ 

    is: "category-manager", 

    properties: { 
     parentCategory: { 
      type: Number, 
      notify: true, 
      observer: "parentChanged" 
     }, 

     parentName: { 
      type: String, 
      notify: true, 
      observer: "nameChanged" 
     }, 
    }, 

    parentChanged: function() { 
     //this is always one step behind 
    }, 

    nameChanged: function() { 
     //this updates on time 
    } 

}); 

</script> 

В принципе, идентификатор текущей категории всегда один шаг позади, где он должен находиться в элементе крошек. Итак, если мой путь Clothes -> Hats, ссылка на шляпы отправит пользователя в одежду вместо этого.

Я проверил, что все данные внутри каждого элемента верны, и проблема заключается в элементе category-manager.

Answer 1

Я решил эту проблему, используя функцию утилиты Polymer async внутри моего элемента <category-breadcrumb>. Мне пришлось добавить дополнительный метод, который вызывает исходный метод наблюдателя.

Соответствующий код:

<dom-module id="category-breadcrumb"> 

<style> 
</style> 

<template> 
    <span>{{breadText}}</span> 
</template> 

<script> 

Polymer({ 

    is: "category-breadcrumb", 

    properties: { 
     parentCategory: { 
      type: Number, 
      notify: true, 
      observer: "depthChange" 
     }, 

    ... 

    depthChange: function() { 
     this.async(function() { 
      this.manageBreadCrumb() //original observer method 
     }, 100); 
    }, 

    ... 

</dom-module> 

Я до сих пор не уверен, если это правильный «Полимер рекомендуется» способ справиться с моей проблемой задержки данных или нет. Но он работает.