bxSlider无法与Knockoutjs一起正常工作

Question

I'm trying to get bxSlider to work properly after the data is loaded from db.

My knockoutjs code works as expected:

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');
    }
}

And this is my 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>

This is bxSlider and KO init code:

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
});

After my data is loaded bxSlider not displaying correctly.

Also, hard-coded html tags works without problem.

Answer 1

Because you're probably initializing the bxSlider before the ajax-request to dal/servis.php has finished.

What if you move the bxSlider code inside the ajax-callback:

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