2015-07-05 3 views
0

У меня есть полимерный элемент, который использует железо-ajax для создания высокочастотной диаграммы. Могу ли я теперь включить iron-localstorage, чтобы график отображался из данных в ls, если ls не пусто, и в этом случае он будет называть iron-ajax для загрузки данных из api?Могу ли я использовать железо-localstorage и iron-ajax с высокими диаграммами

Мой рабочий элемент выглядит следующим образом:

<dom-module id="sales-chart"> 
    <template> 
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax> 
    <div id="container" style="max-width: 600px; height: 360px;"></div> 
    </template> 

    <script> 
    Polymer({ 
     is: "sales-chart", 

     properties: { 
     url: String, 
     data: Object 
     }, 

     observers: [ 
     // These functions only run once the observed properties contain 
     // something other than undefined. 
     '_requestData(url)', 
     '_chartData(data)' 
     ], 

     _requestData: function(url) { 
     // Note: Use `generateRequest()` instead of the `auto` property 
     // because `url` may not be available when your element is 
     // first created. 
     this.$.ajax.generateRequest(); 
     }, 

     _chartData: function (data) { 
     $(this.$.container).highcharts({ 
      chart: { 
      type: 'spline', 
      renderTo: 'container' 
      }, 

      series: [{ 

      data: (data.series) 
      }] 
     }); 


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

ответ

1

Что-то вдоль этих линий должны работать (did't тест это жестко):

<dom-module id="sales-chart"> 
    <template> 
    <iron-ajax id="ajax" url="{{url}}" last-response="{{data}}"></iron-ajax> 
    <div id="container" style="max-width: 600px; height: 360px;"></div> 
    <iron-localstorage name="{{url}}" 
     value="{{data}}" 
     on-iron-localstorage-load-empty="_requestData"> 
    </iron-localstorage> 
    </template> 

    <script> 
    Polymer({ 
     is: "sales-chart", 

     properties: { 
     url: String, 
     data: Object 
     }, 

     observers: [ 
     // These functions only run once the observed properties contain 
     // something other than undefined. 
     '_chartData(data)' 
     ], 

     _requestData: function() { 
     // Note: Use `generateRequest()` instead of the `auto` property 
     // because `url` may not be available when your element is 
     // first created. 
     this.$.ajax.generateRequest(); 
     }, 

     _chartData: function (data) { 
     $(this.$.container).highcharts({ 
      chart: { 
      type: 'spline', 
      renderTo: 'container' 
      }, 

      series: [{ 

      data: (data.series) 
      }] 
     }); 


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