为什么绑定在聚合物元素中不起作用？

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属性设置为“覆盖”，则需要为元素指定高度和宽度。