Question

如果我想显示加载图像并且我使用JQuery来填充我的数据，我会这样做：

HTML

<div id="loadthis"><img src="loading.gif"></div>

JS

$('#loadthis').html("Received Data");

但是，使用Polymer，我的模板如下所示：

<div id="loadthis">{{receiveddata}}</div>

我有这个属性：

Polymer({
    is: 'test-loading',
    properties: {
        receiveddata: {
            type: String,
            value: ''
        }
    }
});

我尝试过简单地将html放在receiveddata但quickly discovered that won't work的值中。我还尝试了moustache等{{#if}}语法，但这根本不起作用。

如何在填充receiveddata属性之前显示图像？

Answer 1

根据@ a1626提到dom-if的评论，我提出了这个解决方案：

<div id="loadthis">
    <template is="dom-if" if="{{isloading}}">
        <img src="loading.gif">
    </template>
    <template is="dom-if" if="{{!isloading}}">
        {{receiveddata}} 
    </template>
</div>

然后我在Polymer定义中添加了isloading属性。

Polymer({
    is: 'test-loading',
    properties: {
        receiveddata: {
            type: String,
            value: ''
        },    
        isloading: {
            type: Boolean,
            value: true
        }
    }
});

现在我只是在数据加载时将其设置为false。

self.isloading = false;

Answer 2

如果要动态加载本地图像，则应使用完整地址加载它。

例如，您的loading.gif图片位于文件夹/images/loading.gif或/views/loading/loading.gif下。虽然您可以静态地使用它<img src="loading.gif">，但一旦您想动态使用它，您应该写this.receiveData = '<img src= "/images/loading.gif">';或this.receiveData = '<img src= "/views/loading/loading.gif">';

聚合物内联条件，或者，如何显示加载图像？

2 个答案: