0

Slidesjs (カルーセルのような) スライド アニメーションを画像リスト (以下に示す) に適用しようとすると、エラーが表示され、画像がスライド アニメーションなしで積み重ねられたようになります。Web Api によって供給される Knockout バインドされたイメージ リストでイメージ スライダーを試した人はいますか?

キャッチされていない typeerror は未定義のプロパティ 'style' を読み取ることができません (下の 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 に要素がないことを発見しました。しかし、slidesjs が開始する前に、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'));
});
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 に答える