twitter bootstrap - Boostrap Carousel with Knockout bindings - can't make nested bindings work -

i'm trying put knockout content in bootstrap carousel.

i need code within comments 'this code i'm having trouble with' (via fiddle link below) repeat match number of pages in 'pagecount' not, i'm presuming becuase of data bindings in slide content. can't work out need or add in view model. number of pages vary, can't make static slides.

plain text context no bindings repeats match number contained in 'pagecount' desired.

sorry can not show database content in fiddle.

html

<div class="container">     <div class="feature-bg-image" id="content">         <script>             $('.carousel').carousel({              })         </script>         <p> need code within comments 'this code i'm having troublw with' below repeat match number of pages in 'pagecount' not because of data bindings. can't work out need or add in view model. </p>         <p>plain text context no bindings repeats match number containe in 'pagecount' desired </p>         <div class="row">             <div id="carousel-home" class="carousel slide" data-interval="false" data-wrap="false">                 <!-- wrapper slides -->                 <div class="carousel-inner">                     <!-- code i'm having troublw -->                     <!-- ko foreach: new array(pagecount()) -->                     <div class="item active">                         <div class="feature-item-container" data-bind="foreach: features">                             <span                                 data-bind="badge: badgeurl, popover: { trigger: 'hover',  html: true, placement: 'left auto' }">                                 <a data-placement='left' data-bind="attr: { href: target }">                                     <img class="feature-item" name="feature_item"                                          data-bind="attr: { src: icon, alt: name }">                                 </a>                             </span>                         </div>                     </div>                     <!-- /ko -->                     <!-- end code i'm having troublw -->                      <!-- ko foreach: new array(pagecount()) -->                     <div class="item">                         <p>                             item repeats match number of pages in 'pagecount'                             content above doesn't. can't work out why after googling week , looking through questions.                         </p>                     </div>                     <!-- /ko -->                 </div>                 <!-- controls -->                 <a class="left carousel-control" href="#carousel-home" data-slide="prev" rel="nofollow">                     <span data-bind="click: previouspage, style: { color: page() > 1 ? '#222' : '#999' }">                         <</span>                 </a>                 <a class="right carousel-control" href="#carousel-home" data-slide="next" rel="nofollow">                     <span data-bind="click: nextpage, style: { color: page()"                     < pagecount() ? '#222' : '#999' }">></span>                 </a>             </div>             <!-- indicators -->             <ol class="carousel-indicators">                 <!-- ko foreach: new array(pagecount()) -->                 <li data-target="#carousel-home" data-bind='attr: { "data-slide-to": $index() }'></li>                 <!-- /ko -->             </ol>         </div>     </div> </div> 

javascript

function featuresviewmodel() {          var self = this;          self.limit = 2;         self.page = ko.observable(1);         self.pagecount = ko.observable(1);           self.features = ko.observablearray();          self.refresh = function() {              $.get('/api/features?page=' + self.page() + '&limit=' + self.limit, function(data) {                 self.features(data.features);                 self.pagecount(data.pagecount);             });         };          self.previouspage = function() {             self.page( self.page() - 1 );             if( self.page() < 1 ) self.page( 1 );             self.refresh();         };          self.nextpage = function() {             self.page( self.page() + 1 );             if( self.page() > self.pagecount() ) self.page( self.pagecount() );             self.refresh();         };           }      $(function() {          var featuresmodel = new featuresviewmodel();             ko.applybindings(featuresmodel);         featuresmodel.refresh();      }); 

i had on google groups knockout forum , picked clue solve problem. added '$parent' 'foreach: features' e.g. 'foreach: $parent.features'. thank admins time , approving question anyway (i know code example isn't perfect did not write originally).