Question

我正在使用带有基础css框架的jssor Carousel Slider。我想用knockout动态生成所有数据（每张幻灯片都有附加图层，我放置了定价表）。

Here这就是我想要的。它正在工作，因为我是静态的 - 只需复制并粘贴每张幻灯片。

当我使用淘汰赛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 -->

我认为它应该只重复四次<div>包含<x>，但我只是黑方块。我该如何解决？哪个错误？我无法找到jssor和knockout的任何例子。

编辑：

感谢@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>

来自淘汰赛的Foreach没有使用jssor滑块

1 个答案: