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

Polymer inline conditional, or, how do I display a loading image?

本文关键字：显示 图像 加载 何显示 条件 或者 聚合物      更新时间：2023-09-26

如果我想显示一个正在加载的图像，并且我正在使用JQuery填充我的数据，我会这样做:

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

JS 

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

然而，与聚合物，我的模板看起来像这样:

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

我有这个属性:

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

我试过简单地把html放在receiveddata的值中，但很快发现这行不通。我也尝试过{{#if}}等的moustache语法，但根本不起作用。

我如何才能显示图像，直到receiveddata属性填充?

根据@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>

然后我在我的聚合物定义中添加了isloading属性。

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

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

self.isloading = false;

如果你想动态加载本地图像，你应该加载完整的地址。

例如，您的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">';

相关文章：