<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<dom-module id="paperfabtest-element">
<template>
<paper-spinner id="spinner" active></paper-spinner>
<BR><paper-fab id="second_button" mini icon="refresh" title="refresh" tabindex="0" class="cyan" onclick="spinner_stop()"></paper-fab>
</template>
<script>
var el;
Polymer({
is: "paperfabtest-element",
ready: function() {
el = this.$$("#spinner");
}
});
function spinner_stop() {
el.active=false;
}
</script>
</dom-module>
删除了样式和一些不需要的代码 这个本地DOM有一个纸制品厂,它会在点击时停止微调器。上面的代码工作正常。
出于某种原因,我使用“onclick”的经典方式来触发一个函数()来停止微调器,而不是在Polymer Registration中使用“on-click”和事件处理。
有没有直接的方法在函数()中选择这个“#spinner”?
更新
最后,我发现代码在jQuery.ajax调用中时不起作用
任何的想法 ?
<script>
Polymer({
is: "My-element",
properties: {
spinner_obj: Object
},
updateData: function() {
this.$$("#spinner").active = true; //this will work
jQuery.ajax({
'async': true,
'global': false,
'cache': false,
'url': 'Some_URL',
'dataType': "json",
'beforeSend': function () {
},
'success': function (responseText) {
//Do Something
this.$$("#spinner").active = true; //this will promot for error
this.$.spinner.active = true; //this will promot for error
spinner_obj.active = false; //No error but no effect
}
});
},
ready: function() {
//Do something
spinner_obj = this.$$("#spinner");
this.updateData();
}
});
</script>
答案 0 :(得分:0)
是的,你可以,而且你已经在准备好的功能中完成了它。
var spinnerElement = this.$$("#spinner");
来自docs:
$$(选择器)。返回此元素的本地DOM中与 selector 匹配的第一个节点。
编辑:看起来你的功能声明是正确的。这是应该如何:
<dom-module id="paperfabtest-element">
<template>
<paper-spinner id="spinner" active></paper-spinner>
<br>
<!-- note use of on-click rather than onclick and no brackets on function call -->
<paper-fab id="second_button" mini icon="refresh" title="refresh" tabindex="0" class="cyan" on-click="spinner_stop"></paper-fab>
</template>
<script>
Polymer({
is: "paperfabtest-element",
ready: function() {
el = this.$$("#spinner");
},
spinner_stop: function () {
var spinner = this.$$("#spinner"); // grab the spinner element
spinner.active = false; // stop the spinnner
}
});
</script>
</dom-module>
答案 1 :(得分:0)
这是因为在ajax调用中你有一个新的闭包,你需要将你的成功函数绑定到&#34;这个&#34;。
updateData: function() {
this.$$("#spinner").active = true; //this will work
jQuery.ajax({
'async': true,
'global': false,
'cache': false,
'url': 'Some_URL',
'dataType': "json",
'beforeSend': function () {
},
'success': function (responseText) {
//Do Something
this.$.spinner.active = false; //use self here
}.bind(this)
});
}
答案 2 :(得分:-1)
确定隐藏在外部范围阴影深处的节点可能很复杂,可能不一致并且是反模式。也许您可以触发stop-spinner
事件并在event.detail
对象内传递目标节点。
<link rel="import" href="bower_components/polymer/polymer.html">
<link rel="import" href="bower_components/paper-styles/paper-styles.html">
<link rel="import" href="bower_components/iron-icons/iron-icons.html">
<link rel="import" href="bower_components/paper-fab/paper-fab.html">
<link rel="import" href="bower_components/paper-spinner/paper-spinner.html">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<dom-module id="paperfabtest-element">
<template>
<paper-spinner id="spinner" active></paper-spinner>
<BR>
<paper-fab id="second_button" mini icon="refresh" title="refresh" tabindex="0" class="cyan"
on-tap="fireStopSpinner">
</paper-fab>
</template>
<script>
Polymer({
is: "paperfabtest-element",
fireStopSpinner: function () {
this.fire("stop-spinner", { targetEl: this.$.spinner });
}
});
// outside of Polymer, you can use jQuery to listen for event
$("paperfabtest-element").on("stop-spinner", function (e) {
e.detail.targetEl.active = false;
});
</script>