crunc / knockout-owlcarousel Goto Github PK
View Code? Open in Web Editor NEWKnockoutJS binding for connecting OWL Carousel with an ko.observableArray()
KnockoutJS binding for connecting OWL Carousel with an ko.observableArray()
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: '
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.