0

I have a custom element from which I want to read an attribute value from my index .html page. The element looks as follows, simplified:

<polymer-element name="card-list" attributes="JSONsource lastUpdatedOn">
<template>
  ...
 </template>
<script>
  Polymer('card-list', {
    created: function() {
      this.lastUpdatedOn = 'init';
      setInterval(ajaxReload, 5000);
    }
  });
    
  var ajaxReload = function() {
      console.log('reload'); 
      updateSyncTime();     
  }
  var updateSyncTime = function() {
    var today = new Date();
    var h = today.getHours();
    var m = today.getMinutes();
    // add a zero in front of numbers<10
    h = checkTime(h);
    m = checkTime(m);
    this.lastUpdatedOn = h + ':' + m;
    console.log(this.lastUpdatedOn);
  }
  var checkTime = function(i) {
    if (i < 10) {
        i = '0' + i;
    }## Heading ##
    return i;
  }
  
</script>
</polymer-element>

I can access this lastUpdatedOn property to display it in index.html. I've tried like this:

<card-list JSONsource="http://sbewepas118:58573/AllergenStatusService.svc/lineinfo" lastUpdatedOn ="{{ lastUpdate }}" > </card-list>

Somewhere else I have a text in which I include {{ lastUpdate }}. On loading the page, {{ lastUpdate }} gets replaced by 'init', from which I conclude that polymer correctly replaces {{ lastUpdate }}, but it simply has the value I initially set to the lastUpdatedOnProperty. When the property is update after an ajax-update, the indexpage does not detect it.

How can I watch for a change of value in this property from my index.html page, which is not a polymer element?

Thanks,

coussej
  • 790
  • 1
  • 8
  • 21

1 Answers1

0

There is an example on how to "Leverages Polymer's onMutation function to watch for changes to a DOM node" here: How can I know that Template Repeat has finished?

As for doing it outside Polymer element, use template is="auto-binding"

Community
  • 1
  • 1
Goce Ribeski
  • 1,352
  • 13
  • 30