Question

我遇到绑定问题。我正在使用Polymer 1.0。现在我正在使用附加函数创建一个包含数据的对象。这个例子非常简单，但不起作用。这是我的代码：

 <dom-module id="photo-block">
    <style>
        :host {
            display: block;
        }
    </style>
    <template>
        <div class="photo-wrapper layout horizontal">
            <div class="flex relative big">
                <iron-image class="placeholder-color fit" src="{{photos.big}}" sizing="cover" preload fade></iron-image>
            </div>
            <div class="flex layout vertical">
                <div class="flex relative">
                    <iron-image class="placeholder-color fit" src="{{photos.small.0}}" sizing="cover" preload fade></iron-image>
                </div>
                <div class="flex relative hidden-xs">
                    <iron-image class="placeholder-color fit" src="{{photos.small.1}}" sizing="cover" preload fade></iron-image>
                </div>
            </div>
        </div>
    </template>
   </dom-module>
    <script>
           Polymer({
            is: 'photo-block',
            properties: {
                photos: Object
            },
            attached: function() {
                this.photos = {
                    big: '/images/photos/YDXJ0696.jpg',
                    small: ['/images/photos/YDXJ0804.jpg', '/images/photos/YDXJ0811.jpg']
                };
                console.log(this.photos);
            }
        });
    </script>

在控制台中，我得到了那个对象，但即使绑定也不起作用..我错过了什么？

Answer 1

绑定实际上有效，问题是您在<iron-image>元素上使用的样式/属性。

尝试更改第一个图像元素：

<iron-image src="{{photos.big}}" preload fade></iron-image>

图像会显示出来。

如果您使用sizing属性设置为“封面”，则需要为<iron-image>元素指定高度和宽度。

为什么绑定在Polymer元素中不起作用？

1 个答案: