I am loading image url's from server, looks like carousel is not waiting util getJSON to bind

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

sgireddy commented 10 years ago

The code snipped is not showing template due to git limitations. I formatted exactly as you showed in your sample.

Crunc / knockout-owlCarousel

I am loading image url's from server, looks like carousel is not waiting util getJSON to bind #4