Question

<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>

Answer 1

是的，你可以，而且你已经在准备好的功能中完成了它。

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>

Answer 2

这是因为在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)
        });

    }

Answer 3

确定隐藏在外部范围阴影深处的节点可能很复杂，可能不一致并且是反模式。也许您可以触发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>

本地DOM中的聚合物和选择器

3 个答案: