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

Popular posts from this blog

java.util.scanner - How to read and add only numbers to array from a text file -

rewrite - Trouble with Wordpress multiple custom querystrings -

php - Accessing static methods using newly created $obj or using class Name -