Ajax完成之前的聚合物渲染元素

Question

那些日子我一直在玩polymer，只是为了测试一些关于AJAX调用等的可能性。

由于聚合物的性质，由于DOM/AJAX竞争条件，我面临一些奇怪的行为。

事实上，我有一个自定义元素，它使用ajax调用来检索针对远程服务的信息（JSON）。

以下是组件：

组件模板合作伙伴。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>

下面是组件功能。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);
            }
        });
    }
});

我不知道为什么，但如果我只使用1个结果元素，元素正确渲染和刷新尽快得到响应，但是如果我收到两个或更多的对象，它渲染元素与正确的模板量（这表明它发现Partners数组具有预期的元素，这由控制台输出确认）。

我不知道如何在polymer上请求DOM元素刷新。如果有人能帮助我，那就太好了。

你可以在这里有用户界面：游乐场用户界面

Answer 1

好的，非常感谢弗拉维奥和甘特！

我终于明白了，但是我添加了一些信息来稍微调整您的信息，因为我正在处理一个大的结果集，而不仅仅是一个对象。

有关信息，请参阅相关代码部分：

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

如您所见，我必须使用一个中间数组才能在空的partners数组中插入整个for循环结果。

如果没有这个技巧，只会设置一个对象。

我真正不明白的是，为什么我使用此代码：

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

聚合物创建正确数量的子节点，但为空。如果它创建了节点，它应该能够拥有所需的信息，这些信息是由循环在推送（）调用期间提供的。

以下是结果页面：

再次感谢你！

Answer 2

为什么要使用JQuery来实现这一点？您应该使用ironajax元素来执行ajax的调用。在这里你可以找到关于它的文档
无论如何，我认为您必须异步执行ajax调用，如下所示：

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

因此，当您得到ajax调用的答案时，应该使用this。设置（'pathOfObject'，value）以通知数组或对象更改。

使用you元素，我认为您必须执行以下操作：

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"}
                       ]
               */
            }
        });
      }); 
    },
});

Answer 3

您的元素只有属性公民身份，但您绑定到合作伙伴。如果要绑定数据，必须创建适当的属性。为了让Polymer注意到属性值的变化，您还需要使用Polymer API来更新值，例如。set（），这个。notifyPath（），。。。