jssor 슬라이더로 녹아웃에서 Foreach가 작동하지 않습니다.

Question

기초 CSS 프레임 워크가있는 jssor Carousel Slider를 사용하고 있습니다. 나는 녹아웃으로 모든 데이터를 동적으로 생성하고 싶다. (가격 테이블을 배치 한 모든 슬라이드마다 추가 레이어가있다.)

Here 내가 얻고 싶은 것입니다. 내가 정적으로하기 때문에 작동합니다. 모든 슬라이드를 복사하여 붙여 넣기 만하면됩니다.

knockouts foreach 루프를 사용할 때 this이 있습니다.

내 뷰 모델 :

function DogsListViewModel() { 

    var self = this; 

    self.dogsList = ko.observableArray([ 
     { "Name": "NameDog1", "Breed": "Dog1Breed", "Desc": "Dog1Description", "Price": "00.00" }, 
     { "Name": "NameDog2", "Breed": "Dog2Breed", "Desc": "Dog2Description", "Price": "01.00" }, 
     { "Name": "NameDog3", "Breed": "Dog3Breed", "Desc": "Dog3Description", "Price": "02.00" }, 
     { "Name": "NameDog4", "Breed": "Dog4Breed", "Desc": "Dog4Description", "Price": "03.00" } 
    ]); 
} 

$(document).ready(function() { 
    ko.applyBindings(new DogsListViewModel()); }); 

및 HTML 소스 :

<!-- START SLIDER -->  
    <!-- Jssor Slider Begin --> 
    <div id="slider1_container" class="cd"> 

     <!-- Loading Screen --> 
     <div u="loading" class="load"> 
      <div class="loadbg"> 
      </div> 
      <div class="loadico"> 
      </div> 
     </div> 

     <!-- Slides Container --> 
     <ul> 
     <div u="slides" class="slidercontainer img-list">   
     <!-- ko foreach: dogsList --> 
      <div> 
      <x> 
      <img u="image" src="http://curezone.com/upload/Members/new03/siberian_husky_dog.jpg" /> 
       <span class="text-content"> 
        <span> 
         <div class="fix-table"> 
          <ul class="pricing-table"> 
          <li class="title" data-bind="text: Name"></li> 
          <li class="bullet-item" data-bind="text: Breed"></li> 
          <li class="description" data-bind="text: Desc"></li> 
          <li class="price" data-bind="text: Price"></li>  
          <li class="fix-cta-button"> 
           <a href="#" class="button">More</a>&nbsp; 
           <a href="#" class="button alert">Buy</a> 
          </li> 
          </ul> 
         </div> 
        </span> 
       </span> 
      </x> 
      </div> 
     <!-- /ko --> 
     </div> 
     </ul>  
    </div> 
    <!-- Jssor Slider End --> 
    <!-- END SLIDER --> 

나는 그냥 네 번 <x> 포함 된 모든 <div>을 반복해야한다고 생각하지만, 난 그냥 검은 색 사각형을 얻었다. 어떻게 해결할 수 있습니까? 버그는 어디에 있습니까? jssor 및 녹아웃으로 예제를 찾을 수 없습니다.

편집 : 나는 모든 이미지가 다른 슬라이드에 성공적으로하지만 바인더 제본하는 것을 알고 @jevgenig에 대한

감사합니다 - 모든 이미지 위에 다른 하나를 누적합니다.

Answer 1

당신이 반복하려는 수준에서의 foreach에 대한 데이터 바인딩을 추가해야합니다

,이 데이터 따라

<div class="row"> 
    <div> 
     <table class="table"> 
      <thead> 
       <tr><th>Name</th><th>Email</th><th></th></tr> 
      </thead> 
      <tbody data-bind="foreach: members"> 
       <tr> 
        <td data-bind="text: Name"></td> 
        <td data-bind="text: Email"></td> 
        <td> 
         <button type="button" class="btn btn-sm btn-success" data-bind="visible: RegisterEmailSent">Send</button> 
        </td> 
       </tr> 
      </tbody> 
     </table> 
    </div> 
</div>