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

时间:2015-07-02 19:24:19

标签: javascript jquery polymer-1.0

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

3 个答案:

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