Question

我编写了一个用于管理产品类别的Polymer元素。在此元素中有三个其他元素：loading categories，adding categories和breadcrumb元素，用于管理类别深度。

每个元素都公开在它们之间共享数据的属性。例如，当达到新的类别级别时，它会将类别名称和ID发送到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>

基本上，当前类别的id总是落后于breadcrumb元素的一步。因此，如果我的路径为Clothes -> Hats，则帽子链接会将用户发送给衣服。

我已经验证了每个元素中的所有数据都是正确的，问题出在category-manager元素中。

Answer 1

我通过在async元素中使用Polymer <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>

我仍然不确定这是否正确＆＃34;聚合物推荐＆＃34;处理我的数据延迟问题的方法。但是，它正在发挥作用。

在元素之间同步聚合物1.0数据绑定

1 个答案: