Polymer 1.x: Доступ ко всем свойствам объекта Polymer

Я пытаюсь создать элемент Polymer custom by wrapping this jQuery plugin. Я хочу получить доступ ко всем опубликованным свойствам объекта Polymer с единственной переменной, а не перечислять их все (общее количество будет 41). например, var a = ['type', 'min', 'max', 'from', 'to', 'step', ...];Polymer 1.x: Доступ ко всем свойствам объекта Polymer

Here is the jsBin.

Я попытался с помощью переменной, this.properties. Который работает вне функция _onSliderChange но не работает внутри его. (Объем для this, по-видимому, был изменен вызывающей функцией computeSliderConfig)?

Просьба предоставить рабочий jsBin, чтобы показать, как это сделать.

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>

источник

2016-01-26 Mowzer

попытаться связать this._onSliderChange к этому. но я думаю, что решение не так, как вы это делаете. Но определите функцию внутри функции ready и add create, которая добавляет эту функцию в this.sliderConfig – Alon

@Alon: Мне трудно понять, что вы имеете в виду. Не могли бы вы отредактировать jsBin, чтобы я мог лучше понять? Кроме того, если вы сделаете это в ответ, я могу поддержать его и принять его, если он работает. Благодаря! знак равно – Mowzer

Решение заключается в добавлении к объекту, который вы возвращаете в computeSliderConfig свойства.

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

и в функции _onSliderChange

console.log (this.properties);

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

источник

2016-01-27 00:45:45 Alon

Polymer 1.x: Доступ ко всем свойствам объекта Polymer

ответ

Смежные вопросы