我正在尝试制作 polymer 自定义元素 by wrapping this jQuery plugin 。我想使用单个变量访问 Polymer 对象的所有已发布属性，而不是将它们全部列出(总数为 41)。例如，var a = ['type', 'min', 'max', 'from', 'to', 'step', ...];
我尝试使用变量this.properties。它在_onSliderChange函数外部工作，但在内部不起作用。 (this 的范围显然被调用函数 computeSliderConfig 改变了)？
请提供一个有效的 jsBin 以展示如何完成此操作。
http://jsbin.com/jaqaguzemo/1/edit?html,输出<!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>
最佳答案
解决方案是将属性添加到您在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);
关于jquery - polymer 1.x : Accessing all Properties of Polymer object，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35026209/