Polymer 1.x: Accessing all Properties of Polymer object

Question

I'm trying to make a Polymer custom element by wrapping this jQuery plugin. I want to access all the published properties of the Polymer object with a single variable instead of listing them all out (there will be a total count of 41). e.g., var a = ['type', 'min', 'max', 'from', 'to', 'step', ...];

Here is the jsBin.

I tried using the variable, this.properties. Which works outside the _onSliderChange function but does not work inside it. (The scope for this was apparently changed by the calling function computeSliderConfig)?

Please provide a working jsBin to show how to accomplish this.

http://jsbin.com/jaqaguzemo/1/edit?html,output

<!doctype html>
<head>
  <meta charset="utf-8">
  <base href="https://polygit.org/components/">
  <script src="webcomponentsjs/webcomponents-lite.min.js"></script>
  <link href="polymer/polymer.html" rel="import">

  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js"></script>
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
  <link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinFlat.css">
</head>
<body>

<dom-module id="x-element">

<template>
  <style>
    /** /
    References:
    http://jsfiddle.net/IonDen/qv6yrjrv/
    http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
    https://github.com/IonDen/ion.rangeSlider#experiments-playground
    /**/
    :host {
      /**/
      font-family: roboto, tahoma, arial, sans-serif;
      /**/
    }
  </style>
  <input type="text"
         class="js-range-slider"
         id="slider"
         value=""
         xdata-type="double"
         xdata-min="0"
         xdata-max="36"
         xdata-prefix="$"
         data-postfix=" months"
         data-force-edges="true"
         data-grid="true"
         xdata-grid-num="9"
         xdata-step="1"
         data-grid-snap="true"
  />
  <div>
    from <span>{{from}}</span>
    to <span>{{to}}</span>
  </div>
  <button on-tap="_show">Show</button>
</template>

<script>
  (function(){
    Polymer({
      is: "x-element",
      properties: {
        sliderConfig: {
          computed: 'computeSliderConfig(type, min, max, from, to, step)'
        },
        type: {
          type: String,
          notify: true,
          reflectToAttribute: true,
          value: 'double',
        },
        min: {
          type: Number,
          notify: true,
          reflectToAttribute: true,
          value: 10,
        },
        max: {
          type: Number,
          notify: true,
          reflectToAttribute: true,
          value: 100,
        },
        from: {
          type: Number,
          notify: true,
          reflectToAttribute: true,
          value: function(){
            return this.min;
          }
        },
        to: {
          type: Number,
          notify: true,
          reflectToAttribute: true,
          value: function(){
            return this.max;
          }
        },
        step: {
          type: Number,
          notify: true,
          reflectToAttribute: true,
          value: 1
        },
      },
      ready: function(){
        $(this.$.slider).ionRangeSlider(this.sliderConfig);
      },
      computeSliderConfig: function(type, min, max, from, to, step) {
        return {
          onChange: this._onSliderChange,
          component: this,
          type: type,
          min: min,
          max: max,
          from: from,
          to: to,
          step: step,
        };
      },
      _onSliderChange: function(data) {
        //console.log(data);
        var a = ['type', 'min', 'max', 'from', 'to', 'step'];
        //The following two lines don't produce the same value for 'a'
        //because 'properties' is not in the scope of 'this'.
        //var a = Object.keys(this.properties);
        //a.shift();
        //Also, element.properties doesn't work as explained here:
        //http://stackoverflow.com/a/25187164/1640892
        ////var a = Object.keys(element.properties);
        var i = a.length;
        while(i--) {
          if(a[i]==='sliderConfig'){continue;}
          this.component.set(a[i], data[a[i]]);
        }
      },
      _show: function(){
        var a = Object.keys(this.properties);
        a.shift();
        console.log(a);
      }
    });
  })();
</script>

</dom-module>

<x-element
  type="double"
  min="0"
  max="48"
  from="6"
  to="18"
  step="3"        
></x-element>

</body>

try to bind the this._onSliderChange to this. but I think the solution is not do it the way you do it. But define function inside the ready and add create function that adds this function to the this.sliderConfig — Alon, Jan 27 '16 at 00:25
@Alon: I'm having trouble understanding what you mean. Would you mind please editing the jsBin so I can better understand? Also, if you do it in an answer I can upvote and accept it too if it works. Thanks! =] — Let Me Tink About It, Jan 27 '16 at 00:38

score 1 · Accepted Answer · answered Jan 27 '16 at 00:45

The solution is to add to the object that you return in computeSliderConfig the properties.

    return {
      onChange: this._onSliderChange,
      component: this,
      type: type,
      min: min,
      max: max,
      from: from,
      to: to,
      step: step,
      properties:this.properties
    };

and in the function _onSliderChange

    console.log (this.properties);

http://jsbin.com/linepipamo/1/edit?html,console,output

Polymer 1.x: Accessing all Properties of Polymer object

1 Answers1