Polymer v1.0 - Изменения привязки данных не распространяются

Question

Попытка моей руки на Polymer v1.0, в настоящее время загружает 2 набора данных. Первый набор установит представление и повторит мои пользовательские элементы. Второй набор загружен асинхронно, после загрузки он будет пытаться сопоставляться через routeid, если он доступен. По совпадению он вставляет себя как объект в 1-й объект.

Когда я это делаю, представление не обновляется, но если я делаю console.log и трассирую его, данные есть.

Я обнаружил, что если я должен очистить 1-й объект, используйте async и установите его позже, представление будет обновлено, но это может привести к тому, что мой дисплей будет пустым некоторое время. Как я могу заставить его перерисовывать с обновленным контентом?

Первый устанавливает вид предметов.

[ 
     { 
      "anchors":[ 
       {"anchorid":1, 
       "routes":[ 
        {"name":"route 1", "routeid":1 }, 
        {"name":"route 2", "routeid":2 }, 
        {"name":"route 3", "routeid":3 } 
       ] 
       }, 
       {"anchorid":2, 
       "routes":[ 
        {"name":"route 4", "routeid":4 }, 
        {"name":"route 5", "routeid":5 }, 
        {"name":"route 6", "routeid":6 } 
       ] 
       } 
      ] 
     }, 
     { 
      "anchors":[ 
       {"anchorid":3, 
       "routes":[ 
        {"name":"route 7", "routeid":7 }, 
        {"name":"route 8", "routeid":8 }, 
        {"name":"route 9", "routeid":9 } 
       ] 
       }, 
       {"anchorid":4, 
       "routes":[ 
        {"name":"route 10", "routeid":10 }, 
        {"name":"route 11", "routeid":11 }, 
        {"name":"route 12", "routeid":12 } 
       ] 
       } 
      ] 
     } 
    ] 

второй набор данных

[ 
    {"routeid":3, "status":2}, 
    {"routeid":5, "status":3}, 
    {"routeid":1, "status":1} 
] 

Мои элементные коды

<dom-module id="anchor-listdebug"> 
    <template> 
     <h1>Anchor list</h1> 
     <template is="dom-repeat" items="{{data}}"> 
      <h2>Anchor Group </h2> 
      <template is="dom-repeat" items="{{item.anchors}}" as="anchordata"> 
       <anchor-item anchor="{{anchordata}}"></anchor-item> 

      </template> 
     </template> 
    </template> 

    <script> 
     Polymer ({ 
      is:"anchor-listdebug", 
      ready : function() { 
       //data is loaded here via iron-ajax 
       this.data = data; 
       //data2 is loaded on data response 
       this.data2 = data2; 

       // emulate 2nd set of data loading, if this.processData is called immediately, content updates fine. 
       this.async (this.processData, 1000); 
      }, 
      processData: function() { 
       this.data.forEach (function (element) { 
        element.anchors.forEach (function (anchorElement){ 
         anchorElement.routes.forEach (function (routeElement){ 
          var myID = routeElement.routeid; 
          var data = this.data2.filter(function (record){ 
           return record.routeid == myID; 
          }); 
          if (data.length >0) { 
           data = data[0]; 
           routeElement.data = data; 
          } 
         }); 
        }); 
       }); 
      } 
     }); 
    </script> 
</dom-module> 

<dom-module id="anchor-item"> 
    <template> 
     <h2>Anchor ID: {{anchor.anchorid}} </h2> 
     <template is="dom-repeat" items="{{anchor.routes}}" as="routedata"> 

      <route-item route="{{routedata}}"></route-item> 
     </template> 

    </template> 

    <script> 
     Polymer ({ 
      is:"anchor-item", 
      properties: { 
       anchor:{ type:Object, notify:true} 
      } 

     }); 
    </script> 
</dom-module> 

<dom-module id="route-item"> 
    <template> 
     <h3>Route id: <span>{{route.routeid}}</span></h3> 
     <h3>Route name: <span>{{route.name}}</span></h3> 
     <h3>Route status: <span>{{route.data.status}}</span></h3> 

    </template> 

    <script> 
     Polymer ({ 
      is:"route-item", 
      properties: { 
       route:{ type:Object, notify:true} 
      } 

     }); 
    </script> 
</dom-module> 

Answer 1

Убедитесь, что вы используете набор API для управления вашими объектами (docs). Вместо this.data.anchors = someValue используйте this.set("data.anchors", someValue).

Answer 2

Во-первых, вам необходимо будет использовать this.set("data.anchors", someValue), как было указано ранее. Вам также потребуется изменить привязку шаблона, иначе полученное уведомление будет проигнорировано. Вместо того, чтобы использовать anchor="{{anchordata}}", вам нужно будет использовать anchor="{{anchordata.*}}" для прослушивания всех изменений записи или anchor="{{anchordata.SPECIFIC_KEY}}", если вы хотите, чтобы изменения отвечали только на один конкретный ключ в данных.

Answer 3

Обновлен цикл forOach для включения индекса, который будет использоваться для построения пути для использования функции set().

<script> 
     Polymer ({ 
      is:"anchor-listdebug", 
      ready : function() { 
       //data is loaded here via iron-ajax 
       this.data = data; 
       //data2 is loaded on data response 
       this.data2 = data2; 

       this.async (this.processData, 1000); 
       //this.processData(); 
      }, 
      processData: function() { 
       var scope = this; 
       this.data.forEach (function (element, index1) { 
        element.anchors.forEach (function (anchorElement, index2){ 
         anchorElement.routes.forEach (function (routeElement, index3){ 
          var myID = routeElement.routeid; 
          var data = this.data2.filter(function (record){ 
           return record.routeid == myID; 
          }); 
          if (data.length >0) { 
           data = data[0]; 
           var tpath = "data."+index1+".anchors."+index2+".routes."+index3+".data"; 
           scope.set(tpath, data); 
          } 
         }); 
        }); 
       }); 
      } 
     }); 
    </script>