为什么绑定在聚合物元素中不起作用?
问题描述:
我有一些绑定的问题。我正在使用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>
在控制台中,我得到的对象,但在不工作..我已经错过了,甚至结合?
答
实际上绑定工作,问题是风格/属性,你<iron-image>
元素上使用。
尝试改变第一图像元素是这样的:
<iron-image src="{{photos.big}}" preload fade></iron-image>
图像将显示出来。
如果使用sizing
属性设置为“覆盖”,则需要为元素指定高度和宽度。
感谢。现在它可以工作。 – ozasadnyy