Question

我正在尝试使用以下代码以Polymer-ish方式绑定幻灯片。

自定义元素HTML

<template>
  <div id="image_container">
    <!-- Reference URL: https://github.com/Iverum/polymer-slideshow -->
    <polymer-slideshow height="200">
      <template is="dom-repeat" items="{{imageGallery}}">
        <polymer-slide>
          <iron-image style="width:100%; height:200px;" sizing="cover" src="{{_getImage(item.path, item.name)}}"></iron-image>
        </polymer-slide>    
      </template>
    </polymer-slideshow>
  </div>
</template>
<script>
(function () {
    'use strict';

    Polymer({
    is: 'advert-billboard',

    properties: {
      imageGallery: {
        type: Array,
        value: [],
        notify: true
      }
    },

    _getImage: function (path, name) {
      return "/" + path + "/" + name;
    }
  });
})();
</script>

我从index.html页面传递了以下JSON：

<script type="text/javascript">
window.addEventListener('WebComponentsReady', function (e) {
  var advertBillboard = document.querySelector("advert-billboard");
  if (advertBillboard != null) {
    advertBillboard.imageGallery = [
      { 'name': '1.jpg', 'path': 'images/bb' },
      { 'name': '2.jpg', 'path': 'images/bb' },
      { 'name': '3.jpg', 'path': 'images/bb' },
      { 'name': '4.jpg', 'path': 'images/bb' }
    ];
  }
}
</script>

以下作品（当我从循环中取出polymer-slideshow和polymer-slide时）：

<template is="dom-repeat" items="{{imageGallery}}">
  <iron-image style="width:100%; height:200px;" sizing="cover" src="{{_getImage(item.path, item.name)}}"></iron-image>
</template>

但这不是

<polymer-slideshow height="200">
  <template is="dom-repeat" items="{{imageGallery}}">
    <polymer-slide>
      <iron-image style="width:100%; height:200px;" sizing="cover" src="{{_getImage(item.path, item.name)}}"></iron-image>
    </polymer-slide>    
  </template>
</polymer-slideshow>

我正在使用https://github.com/Iverum/polymer-slideshow

的引用

更新当我静态放置幻灯片图片时，它们会被渲染并播放幻灯片！

<polymer-slideshow height="200">
  <polymer-slide>
    <iron-image style="width:100%; height:200px;" sizing="cover" src="1.jpg"></iron-image>
  </polymer-slide>
  <polymer-slide>
    <iron-image style="width:100%; height:200px;" sizing="cover" src="2.jpg"></iron-image>
  </polymer-slide>
  <polymer-slide>
    <iron-image style="width:100%; height:200px;" sizing="cover" src="3.jpg"></iron-image>
  </polymer-slide>
</polymer-slideshow>

看到我从循环中取出计算出的方法并将图像静态放在image src中，这应该加载相同的图像，但至少我试图看看它们是否渲染！没有运气:(这就是我的尝试：

<polymer-slideshow height="200">
  <template is="dom-repeat" items="{{imageGallery}}">
    <polymer-slide>
      <iron-image style="width:100%; height:200px;" sizing="cover" src="1.jpg"></iron-image>
    </polymer-slide>    
  </template>
</polymer-slideshow>

Answer 1

重新检查来源。

<iron-image style="width:100%; height:200px;" sizing="cover" src="1.jpg"></iron-image>

计算函数返回/images/bb/1.jpg。尝试显示src地址。如果src地址显示正常，那么你可以排除这种可能性。

聚合物1.0：<polymer-slide>未在<template is =“dom-repeat”>内部渲染

1 个答案: