Question

那些日子我在玩聚合物，只是为了测试一些关于AJAX Calls等的可能性。

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

确实，我使用ajax调用来检测远程服务的信息（JSON）的自定义元素。

以下是组件：

组件模板partners.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>

这是组件函数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);
            }
        });
    }
});

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

我不确定如何在聚合物上请求DOM元素刷新。如果有人可以帮助我，那就太好了。

您可以在此处获取用户界面：playground UI

Answer 1

您的元素只有一个属性citizenship，但您绑定到合作伙伴。如果要进行数据绑定，则必须创建适当的属性。要让Polymer注意到属性值更改，您还需要使用Polymer API来更新this.set()，this.notifyPath()等值...

Answer 2

为什么要用JQuery来做这个？您应该使用iron-ajax元素来执行ajax的调用。 Here您可以找到有关它的文档。
无论如何，我认为你必须异步执行ajax调用，如下所示：

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

因此，当你得到ajax调用的答案时，你应该使用this.set('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

好的，非常感谢Flavio和Günter！

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

对于信息，这里是相关的代码部分：

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

如您所见，我必须使用中间数组才能在空伙伴数组中插入整个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
                        });
                    }
                }
            });
        });
    }
});

Polymer创建正确数量的子节点但为空。如果它创建节点，它应该能够在push（）调用期间由循环提供所需的信息。

以下是结果页面：

再次感谢你！

ajax完成前聚合物渲染元素

3 个答案:

编辑