Polymer v1.0 - Data Binding changes not propagating

Question

Trying my hand at Polymer v1.0, Am currently loading 2 datasets. The first set will set the view and repeat my custom elements. The 2nd set is async loaded, upon loading it will try to match via the routeid if available. On match it will insert itself as an object into the 1st object.

When i do this, the view doesn't get updated, but if i do a console.log and trace it, the data is there.

I discovered if I were to clear the 1st object, use async and set it back later, the view gets updated, but this would cause my display to be blank for a while. How can i force it to redraw with the updated content?

First one sets the view of items.

[ 
        {
            "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 }  
                 ] 
                }
            ]
        }
    ]

2nd dataset

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

My element codes

    <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

Make sure that you use the set API for manipulating your objects (docs). Instead of this.data.anchors = someValue use this.set("data.anchors", someValue).