0

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

未捕获的类型错误无法读取未定义的属性“样式”（在下面的 slidesControl[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]

发生错误是因为 slidesContainer[0] 上没有样式属性，也没有 slidesContainer 因为它设置为：

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

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

编辑（提示）

我发现当 slidesjs 插件初始化时，#slider div 中没有元素。但是 Knockout 应该在 slidesjs 启动之前填充它。因为淘汰码是第一位的。这是我在 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'));
});
4

2 回答 2

0

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

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 之前检查它是否返回数据。

于 2013-10-06T14:20:54.507 回答
0

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

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

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
    });
  });
}
于 2013-10-07T06:34:08.657 回答