Jquery 聚合物1.x：访问聚合物对象的所有属性
我正在尝试制作一个聚合物定制元素。我想用一个变量访问Polymer对象的所有已发布属性，而不是将它们全部列出（总共将有41个）。e、 例如，Jquery 聚合物1.x：访问聚合物对象的所有属性,jquery,polymer,polymer-1.0,Jquery,Polymer,Polymer 1.0,我正在尝试制作一个聚合物定制元素。我想用一个变量访问Polymer对象的所有已发布属性，而不是将它们全部列出（总共将有41个）。e、 例如，var a=['type'，'min'，'max'，'from'，'to'，'step'，…] 我尝试使用变量，this.properties。在滑动更改功能的外部工作，但在其内部不工作。（调用函数computeSliderConfig显然改变了此的范围） 请提供一个工作jsBin来说明如何实现这一点 http://jsbin.com/jaqaguzem
var a=['type'，'min'，'max'，'from'，'to'，'step'，…]
我尝试使用变量，this.properties
。在滑动更改computeSliderConfig此<!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>
/** /
参考资料：
http://jsfiddle.net/IonDen/qv6yrjrv/
http://ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html
https://github.com/IonDen/ion.rangeSlider#experiments-游乐场
/**/
：主持人{
/**/
字体系列：roboto、tahoma、arial、无衬线字体；
/**/
}
from{{from}
到{{to}
显示
（功能（）{
聚合物({
是：“x元素”，
特性：{
幻灯片配置：{
计算：“computeSliderConfig（类型、最小值、最大值、从、到、步长）”
},
类型：{
类型：字符串，
通知：正确，
reflectToAttribute:true，
值：'double'，
},
最小值：{
类型：数字，
通知：正确，
reflectToAttribute:true，
数值：10，
},
最大值：{
类型：数字，
通知：正确，
reflectToAttribute:true，
数值：100，
},
发件人：{
类型：数字，
通知：正确，
reflectToAttribute:true，
值：函数（）{
返回这个.min；
}
},
致：{
类型：数字，
通知：正确，
reflectToAttribute:true，
值：函数（）{
返回此.max；
}
},
步骤：{
类型：数字，
通知：正确，
reflectToAttribute:true，
价值：1
},
},
就绪：函数（）{
$（this.$.slider）.IonRangeSloider（this.sliderConfig）；
},
computeSliderConfig：函数（类型、最小值、最大值、从、到、步长）{
返回{
改变：这个，
组成部分：本，
类型：类型，
敏:敏,，
马克斯：马克斯，
from:from,，
致:致,，
步骤：步骤，
};
},
_onSliderChange:函数（数据）{
//控制台日志（数据）；
变量a=[“类型”、“最小”、“最大”、“从”、“到”、“步骤”]；
//以下两行不会为“a”生成相同的值
//因为“属性”不在“this”的范围内。
//var a=Object.keys（this.properties）；
//a、 移位（）；
//此外，element.properties也不起作用，如下所述：
//http://stackoverflow.com/a/25187164/1640892
////var a=Object.keys（element.properties）；
var i=a.长度；
而(我--){
如果（a[i]=='sliderConfig'）{continue；}
this.component.set（a[i]，data[a[i]]）；
}
},
_show:function（）{
var a=Object.keys（this.properties）；
a、 移位（）；
控制台日志（a）；
}
});
})();
return {
onChange: this._onSliderChange,
component: this,
type: type,
min: min,
max: max,
from: from,
to: to,
step: step,
properties:this.properties
};
console.log (this.properties);
尝试绑定此项。\u滑动更改此项。但我认为解决办法不是按你的方式去做。但是在ready和addcreate函数中定义函数，该函数将此函数添加到this中。sliderConfig@Alon当前位置我很难理解你的意思。你介意编辑jsBin以便我能更好地理解吗？另外，如果你在回答中这样做，我也可以投赞成票，如果它有效的话，我也可以接受。谢谢！=]