Question

当我尝试在图像列表（如下所示）上应用Slidesjs（类似轮播）幻灯片动画时，会出现错误，图像就像堆叠在自身上而没有幻灯片动画。有人在Web Api提供的Knockout绑定图像列表上尝试了一个图像滑块吗？

未捕获的typeerror无法读取undefined的属性'style'（在slideControl [0] .style [transform]下面）

 if (this.data.vendorPrefix) {
      prefix = this.data.vendorPrefix;
      transform = prefix + "Transform";
      duration = prefix + "TransitionDuration";
      timing = prefix + "TransitionTimingFunction";
      ERROR LINE-->slidesControl[0].style[transform] = "translateX(" + direction + "px)";
      ...[Script goes on]

因为slideContainer [0]上没有样式属性而发生错误，没有slideContainer，因为它被设置为：

slidesControl = $(".slidesjs-control", $element)

所以问题是为什么Slidejs-control不是由Slidesjs插件生成的。有什么想法吗？

编辑（提示）

我发现当slidejs插件初始化时，#slider div中没有元素。但是，在slidejs开始之前，Knockout应该已经填充了它。因为Knockout代码是第一位的。这是我在SlidesJs的Init方法中在控制台上键入$（“＃slider”）并按Enter键时得到的结果：

<div id="slider" data-bind="foreach: banners" style="overflow:hidden;"></div>

我的HTML：

<div class="webTV">
  <div class="slideBox">
    <div id="slider" data-bind="foreach: banners">
      <a data-bind="attr: { href: $data.Href, target: $data.Target }">
        <img data-bind="attr: { src: $data.ImageUrl }" width="728" height="288" alt="" />
      </a>
    </div>
  </div>
</div>

我的Slidesjs脚本：

$(window).load(function() {
  $('#slider').slidesjs({
    width: 728,
    height: 288
  });
});

我的淘汰赛脚本：

function BannerViewModel() {
  var self = this;
  self.banners = ko.observableArray([]);
  var baseUri = '/api/Home/GetSliderBanners';
  $.getJSON(baseUri, function (data) {
    self.banners(data.SliderBanners);
  });
}

$(document).ready(function () {
  ko.applyBindings(new BannerViewModel(), document.getElementById('slider'));
});

Answer 1

我会尝试以下操作，看看您是否可以先获取数据并将其作为构造函数传递给视图模型。

function BannerViewModel(sliderBanners) {
  var self = this;
  self.banners = ko.observableArray(sliderBanners);
}

$(document).ready(function () {
  var baseUri = '/api/Home/GetSliderBanners';
  var sliderBanners;
  $.getJSON(baseUri, function (data) {
    sliderBanners = data.SliderBanners);
  });
  ko.applyBindings(new BannerViewModel(sliderBanners), document.getElementById('slider'));
});

getJSON是异步的，因此您可能必须在applyBindings之前检查它是否返回数据。

Answer 2

当在getJSON中调用滑块脚本时（在从服务中检索数据之后），它可以工作。

问题是，当滑块脚本初始化滑动时，它会将#slider HTML（输入）作为空接收。因此，它尝试为滑块的每个子项创建元素，然后调用不存在的元素的style属性，这会生成此错误：无法读取属性＆＃39; style＆＃39;未定义的

function BannerViewModel() {
  var self = this;
  self.banners = ko.observableArray([]);
  var baseUri = '/api/Home/GetSliderBanners';
  $.getJSON(baseUri, function (data) {
    self.banners(data.SliderBanners);
    $('#slider').slidesjs({
      width: 728,
      height: 288
    });
  });
}

在Knockout绑定图像列表上应用Slidesjs幻灯片

编辑（提示）

2 个答案: