jquery - Applying Slidesjs slide on Knockout binded image list -
when try apply slidesjs (carousel-like) slide animation on image list (shown below), error appears , images stacked on no slide animation. tried image slider on knockout binded image list fed web api?
uncaught typeerror cannot read property 'style' of undefined (at slidescontrol[0].style[transform] below)
if (this.data.vendorprefix) { prefix = this.data.vendorprefix; transform = prefix + "transform"; duration = prefix + "transitionduration"; timing = prefix + "transitiontimingfunction"; error line-->slidescontrol[0].style[transform] = "translatex(" + direction + "px)"; ...[script goes on]
error occurs because there no style attribute on slidescontainer[0], there no slidescontainer either beacuse set as:
slidescontrol = $(".slidesjs-control", $element)
so problem why slidesjs-control not generated slidesjs plugin. idea?
edit (a hint)
i have discovered when slidesjs plugin initializes, there no element in #slider div. knockout should have filled before slidesjs starts. because knockout code comes first. when typed $("#slider") on console in init method of slidesjs , hit enter:
<div id="slider" data-bind="foreach: banners" style="overflow:hidden;"></div>
my html:
<div class="webtv"> <div class="slidebox"> <div id="slider" data-bind="foreach: banners"> <a data-bind="attr: { href: $data.href, target: $data.target }"> <img data-bind="attr: { src: $data.imageurl }" width="728" height="288" alt="" /> </a> </div> </div> </div>
my slidesjs script:
$(window).load(function() { $('#slider').slidesjs({ width: 728, height: 288 }); });
my knockout script:
function bannerviewmodel() { var self = this; self.banners = ko.observablearray([]); var baseuri = '/api/home/getsliderbanners'; $.getjson(baseuri, function (data) { self.banners(data.sliderbanners); }); } $(document).ready(function () { ko.applybindings(new bannerviewmodel(), document.getelementbyid('slider')); });
i try following , see if can data first , pass in constructor view model.
function bannerviewmodel(sliderbanners) { var self = this; self.banners = ko.observablearray(sliderbanners); } $(document).ready(function () { var baseuri = '/api/home/getsliderbanners'; var sliderbanners; $.getjson(baseuri, function (data) { sliderbanners = data.sliderbanners); }); ko.applybindings(new bannerviewmodel(sliderbanners), document.getelementbyid('slider')); });
getjson asynchronous may have check returns data before applybindings.
Comments
Post a Comment