Question

我正在尝试从db加载数据后让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

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

如果你在ajax-callback中移动bxSlider代码怎么办？

$.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');

bxSlider与Knockoutjs无法正常工作

1 个答案: