同步聚合物1.0元素之間的數據綁定

我正在編寫用於管理產品類別的聚合物元素。在這個元素內部還有三個元素：loading categories,adding categories和breadcrumb元素用於管理類別深度。同步聚合物1.0元素之間的數據綁定

每個元素都公開在它們之間共享數據的屬性。例如，當達到新的類別級別時，它將類別名稱和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總是落後它應該在麪包屑元件，其中一個步驟。所以，如果我的路徑是Clothes -> Hats，那麼帽子鏈接會將用戶轉到服裝上。

我已驗證每個元素中的所有數據都是正確的，問題在於category-manager元素。

來源

2015-10-14 anthony

我通過在我的<category-breadcrumb>元素中使用Polymer的async實用函數解決了此問題。我不得不添加一個調用原始觀察者方法的額外方法。

相關代碼：

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

我仍然不知道這是正確的「高分子推薦」的方法來處理我的數據延遲的問題或沒有。但是，它工作。

來源

2015-10-15 01:00:42 anthony

同步聚合物1.0元素之間的數據綁定

回答

相關問題