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

Question

我在绑定方面遇到了一些问题。我正在使用聚合物 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> 元素上使用的 style/attributes。

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

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

图像将会显示。

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

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

Why binding doesn't work in Polymer element?

polymer