Полимер и селектор внутри локального DOM

<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 получил бумажную фабрику, и он остановит счетчик при нажатии. Приведенные выше коды работают нормально.

По какой-то причине я использую классический способ «по щелчку» для запуска функции() для остановки счетчика, а не использую «по щелчку» и обработку событий внутри регистрации полимера.

Есть ли прямой способ выбрать этот "#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>

javascript jquery polymer-1.0
person Jerson    schedule 02.07.2015    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Да, вы можете, и вы уже сделали это в своей готовой функции.

var spinnerElement = this.$$("#spinner");

Из документов:

$$(селектор). Возвращает первый узел в локальной модели DOM этого элемента, соответствующий селектору.

EDIT: похоже, ваше объявление функции указано правильно. Вот как это должно быть:

<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>
person Ben Thomas    schedule 02.07.2015
comment
Есть ли способ выбрать его непосредственно в функции spinner_stop(), но не в ready()? Я пробую $$(селектор) или jQuery в функции spinner_stop(), но оба там не работают - person Jerson; 03.07.2015
comment
this.$$("#spinner"); выберет его. См. здесь для основного примера. У меня есть div с идентификатором (который представляет ваш счетчик) и кнопка с событием on-click. Когда кнопка нажата, я выбираю div с идентификатором, используя var spinner = this.$$("#spinner"); Затем вы можете остановить счетчик, используя spinner.active = false; - person Ben Thomas; 03.07.2015
comment
Спасибо. Я пробую этот метод в упрощенных кодах, и он работает. Так странно, что это все еще не удалось, когда это было реализовано в производственных кодах. Подсказка Firebug для ReferenceError: spinner не определен, и я должен использовать старый метод. буду отлаживать :( - person Jerson; 03.07.2015
comment
Почему вы продолжаете использовать $$, если уже дали id <paper-spinner>? Вы можете просто сослаться на this.$.spinner, нет? - person zerodevx; 03.07.2015
comment
Да, это просто мои личные предпочтения. - person Ben Thomas; 03.07.2015
comment
Обновление: проблема возникла внутри ajax(), что-то не так? - person Jerson; 06.07.2015

arrow_upward
0
arrow_downward

это потому, что внутри вызова ajax у вас есть новое закрытие, вам нужно связать свою функцию успеха с «этим».

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)
        });

    }
person user3871123    schedule 11.09.2015

arrow_upward
-1
arrow_downward

Обнаружение точного узла, скрытого глубоко внутри тени из внешних областей, может быть сложным, потенциально противоречивым и является анти-шаблоном. Возможно, вы можете запустить событие 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>
person zerodevx    schedule 03.07.2015
comment
Если родительский элемент является элементом Polymer, вы должны использовать прослушиватели Polymer для перехвата события. Поскольку и кнопка, и счетчик находятся в одном и том же элементе, вы можете просто остановить счетчик в этом элементе. Затем, если требуется, вы можете запустить и отправить событие родителю, чтобы уведомить об остановке счетчика. - person Ben Thomas; 03.07.2015
comment
Ну, я просто отвечаю, основываясь на том, что говорит ОП. Ему нужен jQuery, и он не хочет использовать прослушиватели on-* Polymer. Мое решение дает ему именно это. Обсуждение того, что именно он пытается сделать, или то, что он делает, является анти-шаблоном, выходит за рамки вопроса. - person zerodevx; 03.07.2015