Question

我正在使用一个淘汰的foreach循环来渲染一组div，但循环可以正常工作，但是渲染下一行之前它会渲染每个数组项三次（这是数组的长度）。

 <div data-bind="foreach: { data: activitySubList } ">
     <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }">
         <div class="rowCell editCell"><a href="#">Edit</a></div>
     </div>
 </div>

生成的标记如下所示：

    <div data-bind="foreach: { data: activitySubList, includeDestroyed: false }">
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                
   </div>                            
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                             
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow0">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                            
   <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                
   </div>                             
   <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                             
   <div class="tblRow ui-helper-clearfix odd" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow1">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                             
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                          
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>                             
   <div class="tblRow ui-helper-clearfix" data-bind="css: { odd: $index() % 2 }, attr: { id: 'actRow' + $index() }" id="actRow2">
      <div class="rowCell editCell"><a href="#">Edit</a></div>                                 
   </div>
</div>

简而言之，循环在移动渲染下一个元素之前，将每个元素渲染为array.length（）（在本例中为3次）。

编辑：activitySubList是一个包含3个元素的ko.observableArray。

编辑2：我意识到这个问题没有被正确地问到，但问题已得到解决。它最终与每个循环没有任何关系，但它自己的形式被多次绑定创建重复数据

Answer 1

您没有提供数据绑定的草图实现，正如其他人所评论的那样。假设'activitySubList'是你的var，你试过这个吗？

fun recomendationsData() {

    Fuel.get("https://rss.itunes.apple.com/api/v1/us/apple-music/hot-tracks/10/explicit.json").response { request, response, result ->
                    println(request)
                    println(response)
                    val (bytes, error) = result
                    if (bytes != null) {
                        val str = String(bytes)
                        val obj = JSONObject(str)
                        val resultsP = obj.getJSONObject("feed")
                        val results = resultsP.getJSONArray("results")

                        for (i in 0..(results.length() - 1)) {
                            val o = results.getJSONObject(i)
                            trackName1.add(o.getString("name"))
                            trackArtist1.add(o.getString("artistName"))
                            trackImage1.add(o.getString("artworkUrl100"))
                        }


                    }
                }
}

Knockout Foreach循环渲染太多元素

1 个答案: