Sync Polymer 1.0 Data Binding Between Elements

Question

I writing a Polymer element for managing product categories. Inside this element are three other elements for: loading categories , adding categories , and a breadcrumb element for managing category depth.

Each element exposes properties that share data between them. For instance, when a new category level is reached, it sends the category name and id to the breadcrumb element.

The problem I'm facing is that the data isn't synced, and the methods are firing before the data is loaded. I'm guessing I need to employ some sort of callback to ensure all data is loaded, but I'm not sure which way is best.

<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>

Basically, the id of the current category is always one step behind where it should be in the breadcrumb element. So, if my path is Clothes -> Hats the hats link will send the user to clothes instead.

I've verified that all data inside of each element is correct, and the issue lies in the category-manager element.

Answer 1

I solved this issue by using Polymer's async utility function inside of my <category-breadcrumb> element. I had to add an extra method that calls the original observer method.

Relevant code:

<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>

I'm still not sure if this is the correct "Polymer recommended" method to handle my data delay problem or not. But, it's working.