Ich spiele in diesen Tagen mit Polymer herum, nur um einige Möglichkeiten in Bezug auf AJAX-Anrufe usw. zu testen.

Und aufgrund der Polymer-Natur sehe ich mich aufgrund einer DOM / AJAX-Rennbedingung einem seltsamen Verhalten gegenüber.

In der Tat habe ich ein benutzerdefiniertes Element, das einen Ajax-Aufruf verwendet, um Informationen (JSON) für einen Remotedienst abzurufen.

Hier ist die Komponente:

Komponentenvorlage partner.html

<link rel="stylesheet" href="partners.css" />
<dom-module id="playground-partners">

<template>
    <template is="dom-repeat" items="{{partners}}">
        <section class="partner">
            <img src="{{item.logo}}" alt="partners logo placeholder"/>
            <section class="punshline">{{item.punshline}}</section>
        </section>
    </template>
</template>
<script async type="text/javascript" src="partners.js"></script>

Hier ist die Komponente Funktionen Partners.js

Polymer({
    is: "playground-partners",

    properties: {
        citizenship: {
            type: String
        }
    },

    attached: function(){
        $.ajax({
            context: this,
            url: "http://api.randomuser.me/?results=4&nat="+this.citizenship,
            dataType: 'json',
            success: function(data){
                this.partners = [];
                for (var i = 0, len = data.results.length; i < len; i++) {
                    this.partners.push({
                        logo: data.results[i].user.picture.thumbnail,
                        punshline: data.results[i].user.name.first + " " + data.results[i].user.name.last
                    });
                    console.log(data.results[i].user.name.first);
                    console.log(this.partners[i]);
                }
                console.log(this.partners.length);
            }
        });
    }
});

Ich weiß nicht warum, aber wenn ich nur 1 Ergebniselement verwende, wird das Element korrekt gerendert und aktualisiert, sobald es die Antwort erhält. Wenn ich jedoch zwei oder mehr Objekte erhalte, wird das Element mit der richtigen Menge an Vorlage gerendert ( die darauf hinweisen, dass es herausfindet, dass das partners Array erwartete Elemente hat, was durch die Konsolenausgabe bestätigt wird).

Ich bin mir nicht sicher, wie ich nach einer DOM-Elementaktualisierung für Polymer fragen soll. Wenn mir jemand helfen könnte, wäre es wunderbar.

Sie können die Benutzeroberfläche hier haben: Spielplatz-Benutzeroberfläche

0
Dr I 28 Dez. 2015 im 14:34

3 Antworten

Beste Antwort

Warum sollte man dazu JQuery verwenden? Sie sollten das Element iron-ajax verwenden, um Ajax-Aufrufe auszuführen. Hier finden Sie Dokumentation dazu.
Wie auch immer, ich denke, Sie müssen Ajax-Aufrufe asynchron wie folgt ausführen:

attached: function(){
   this.async(function(){
   //ajax call here
   },someTimeIfNeeded);
}

Wenn Sie die Antwort eines Ajax-Aufrufs erhalten, sollten Sie this.set('pathOfObject', value) verwenden, um Array- oder Objektänderungen zu benachrichtigen.

Bearbeiten

Ich denke, Sie müssen mit Ihrem Element Folgendes tun:

Polymer({
    is: "playground-partners",

    properties: {
        citizenship: {
            type: String
        },
        partners:{
            type: Array,
            value: function(){return [];}
        },
    },

    attached: function(){
      this.async(function(){  
        $.ajax({
            context: this,
            url: "http://api.randomuser.me/?results=4&nat="+this.citizenship,
            dataType: 'json',
            success: function(data){
                this.set("partners", data.results);
                /* I think that your object should be something like this
                  data:[{logo:"logoUrl", pushLineData:"pushLineData"},
                        {logo:"logoUrl2", pushLineData:"pushLineData2"}
                       ]
               */
            }
        });
      }); 
    },
});
0
Community 20 Juni 2020 im 09:12

Ihr Element hat nur eine Eigenschaft citizenship, aber Sie binden an Partner. Wenn Sie Daten binden möchten, müssen Sie die richtigen Eigenschaften erstellen. Damit Polymer Änderungen des Eigenschaftswerts bemerkt, müssen Sie auch die Polymer-API verwenden, um Werte wie this.set(), this.notifyPath(), ... zu aktualisieren.

1
Günter Zöchbauer 28 Dez. 2015 im 12:06

Ok, also vielen Dank an euch beide, Flavio und Günter!

Ich verstehe es endlich, aber ich füge hinzu, um Ihre Informationen leicht anzupassen, da ich mit einer großen Ergebnismenge und nicht nur einem Objekt arbeite.

Für Informationen ist hier der relevante Codeteil:

attached: function(){
        this.async( function(){
            $.ajax({
                context: this,
                url: this.url+this.citizenship,
                dataType: 'json',
                success: function(data){
                    sanitizedData = []
                    for (var i = 0, len = data.results.length; i < len; i++) {
                        sanitizedData.push({
                            logo: data.results[i].user.picture.thumbnail,
                            punshline: data.results[i].user.name.first + " " + data.results[i].user.name.last
                        });
                        console.log(sanitizedData);
                    }
                    this.set("partners", sanitizedData);
                }
            });
        });
    }
});

Wie Sie sehen, musste ich ein Zwischenarray verwenden, um das gesamte for-Schleifenergebnis in das leere Partnerarray einfügen zu können.

Ohne diesen Trick wird nur ein Objekt gesetzt.

Was ich nicht wirklich verstehe, ist warum, wenn ich diesen Code verwende:

Polymer({
    is: "playground-partners",

    properties: {
        url: {
            type: String
        },
        citizenship: {
            type: String
        }
    },

    attached: function(){
        console.log(this.partners);
        this.async( function(){
            $.ajax({
                context: this,
                url: this.url+this.citizenship,
                dataType: 'json',
                success: function(data){
                    this.partners = []
                    for (var i = 0, len = data.results.length; i < len; i++) {
                        this.partners.push({
                            logo: data.results[i].user.picture.thumbnail,
                            punshline: data.results[i].user.name.first + " " + data.results[i].user.name.last
                        });
                    }
                }
            });
        });
    }
});

Polymer erstellt die richtige Anzahl von untergeordneten Knoten, ist jedoch leer. Wenn es die Knoten erstellt, sollte es in der Lage sein, die erforderlichen Informationen zu erhalten, sofern diese von der Schleife während des Aufrufs von push () bereitgestellt werden.

Hier ist die Ergebnisseite:

Polymer gets crazy :p

Nochmals vielen Dank an Sie!

0
Community 20 Juni 2020 im 09:12