javascript - bxSlider 无法与 Knockoutjs 正常工作

Question

我试图让 bxSlider 在从数据库加载数据后正常工作。

我的knockoutjs代码按预期工作:

BspApp.UspjesnaPrica = function (n) {
    var self = this;

    self.nid = n.id;
    self.naslov = n.naslov;
    self.datum = n.datum;
    self.prica = n.prica;
    self.detailUrl = '/vise/prica/' + n.id;
    self.imgUrl = n.imgPath;
}

BspApp.UspjesnePrice = function () {
    var self = this;
    self.price = ko.observableArray([]);
    self.a = "parent";

    self.ucitajSve = function () {

        $.get('dal/servis.php', { tip: 'price' }, function (price) {
            $.each(price, function (indx, prica) {
                self.price.push(new BspApp.UspjesnaPrica(prica));
            });
        }, 'json');
    }
}

这是我的 html:

    <ul data-bind="foreach: price" id="priceSlider">
        <li>
            <a data-bind="attr: { href: detailUrl }">
                <img data-bind="attr: { src: imgUrl, title: naslov }" />
            </a>
        </li>
    </ul>

这是 bxSlider 和 KO 初始化代码:

var uspjesneprice = new BspApp.UspjesnePrice();
uspjesneprice.ucitajSve();
ko.applyBindings(uspjesneprice, document.getElementById('uspjesneprice'));

var priceSlider = $("#priceSlider").bxSlider({
    mode: 'horizontal',
    hideControlOnEnd: true,
    adaptiveHeight: true,
    captions: true
});

加载数据后，bxSlider 无法正确显示。

此外，硬编码的 html 标记也可以正常工作。

Answer 1

因为您可能在对 dal/servis.php 的 ajax 请求完成之前初始化 bxSlider。

如果将 bxSlider 代码移动到 ajax 回调中会怎样:

$.get('dal/servis.php', { tip: 'price' }, function (price) {
    $.each(price, function (indx, prica) {
        self.price.push(new BspApp.UspjesnaPrica(prica));
    });
    var priceSlider = $("#priceSlider").bxSlider({
        mode: 'horizontal',
        hideControlOnEnd: true,
        adaptiveHeight: true,
        captions: true
    });
}, 'json');