crunc / knockout-owlcarousel Goto Github PK

Greetings, I know this isn't a divisive issue whatsoever, but I thought I'd point out a new version of Owl Carousel is up -

http://www.owlcarousel.owlgraphic.com/

We use your code, it's a huge help ! But it doesn't work with the new OC, which is reworked quite a bit and doesn't allow you to select using "owl.$owlItems" or "owl.$owlWrapper", etc.

Anywho, thanks again for the code ! Just an FYI.

I am working on a SPA project where images are being hosted at cloudinary and corresponding url's are stored on my database. I am using knockout to fetch details. Looks like the carousel function is loading well before .getJSON hence the issue below.

Uncaught TypeError: Unable to process binding "owlCarousel: function (){return { data:images,owlOptions:{ singleItem:true,afterMove:onCarouselMoved}} }"
Message: Cannot read property '0' of undefined knockout-owlCarousel.js:120ko.bindingHandlers.owlCarousel.init knockout-owlCarousel.js:120(anonymous function) knockout.js:63a.Y.a.k.B knockout.js:34(anonymous function) knockout.js:63a.a.u knockout.js:10f knockout.js:62h knockout.js:60g knockout.js:60h knockout.js:60g knockout.js:60a.Ca knockout.js:66(anonymous function) knockout.js:76A.notifySubscribers knockout.js:32(anonymous function) knockout.js:68setTimeout (async)(anonymous function) knockout.js:68(anonymous function) knockout.js:68(anonymous function) knockout.js:68k knockout.js:69(anonymous function) knockout.js:70(anonymous function) knockout.js:68d knockout.js:70a.g.ub.loadViewModel knockout.js:73e knockout.js:68(anonymous function) knockout.js:69g knockout.js:71b knockout.js:69(anonymous function) knockout.js:72g knockout.js:71a.g.ub.loadComponent knockout.js:72e knockout.js:68(anonymous function) knockout.js:68(anonymous function) knockout.js:68a.g.ub.getConfig knockout.js:72e knockout.js:68c knockout.js:68d knockout.js:67a.g.get knockout.js:69a.s.o knockout.js:76k knockout.js:42a.s.a.j knockout.js:45a.d.component.init knockout.js:75(anonymous function) knockout.js:63a.Y.a.k.B knockout.js:34(anonymous function) knockout.js:63a.a.u knockout.js:10f knockout.js:62h knockout.js:60a.pb knockout.js:66addNewTab tabs.js:36onclick

Here is my source code:
function insert(str, index, value) {
return str.substr(0, index) + value + str.substr(index);
}

function TabDetailsViewModel(params) {
var self = this;
self.title = ko.observable("");
self.brief = ko.observable("");
self.extended = ko.observable("");
self.heroImage = ko.observable("");
self.address = ko.observable("");
self.images = ko.observableArray();

var url = "http://localhost:3000/propertyapi?id=" + params.id;
$.getJSON(url, function (data) {
    console.log('observables:');
    var prop = data.properties;
    self.title(prop.title);
    self.brief(prop.content.brief);
    self.extended(prop.content.extended);
    self.heroImage(prop.heroImage.url);
    var addr = prop.location;
    var adr = addr.street1 + ", " + addr.street2 + ", " + addr.suburb + ", " + ", " + addr.state + ", " + addr.country + ", " + addr.postcode;
    self.address(adr);
    var arr = [];
    var imgs = prop.images;
    console.log(imgs);
    for (var i = 0; i < imgs.length; i++) {            
        var url = imgs[i].url;            
        arr.push({ 'name': 'Image ' + i, 'url': insert(url, url.indexOf("upload") + 6, "/w_500,h_400,c_scale") });                    
    }
    self.images(arr);
});

self.onCarouselMoved = function () {
    console.log("The carousel moved!");
}; 

}

ko.components.register('tab-details', {
template: '

',
viewModel: TabDetailsViewModel
});

Pager does not appear, because it is not updated during the knockout items iteration. Its internal status is always - one item.
You should add
owl.updatePagination();
owl.updateControls();
in the refreshOwl() function just after or before owl.calculateAll()
Greetings!