淘汰赛js foreach将大型数据逐行绑定到模板 [英] Knockout js foreach binding large data into row by row template

问题描述

我有一个如下所示的数据绑定，使用敲除和自举css.我有 这个degreeCodes jSON可以说40个项目.但是在UI方面我 每个<div class="row" >

I have a Data binding like below using knockout and bootstrap css. i have this degreeCodes jSON that has let's say 40 items. but on UI side i only want 4 on each <div class="row" >

第五个应该创建一个新的<div class="row" >并添加内容 那里.因此，如果它正常工作，它将有10个<div class="row" > 并且每个都有4个项目

the 5th one should create a new <div class="row" > and add the content there. so if it worked correctly it would have 10 <div class="row" > and each with 4 items of

<label class="text-muted" data-bind="text: DegreeName"></label>

我该怎么做这样的模板?当到达n mod 4 = 0时，它会在其中添加新的div类行，其中n是绑定的jsonview中的当前项?如果可以，我可以添加一个父div

<div class="row" data-bind="foreach: degreeCodes">
                <label class="text-muted" data-bind="text: DegreeName">></label>
<div>

如果工作正常，将呈现类似...

if it worked correctly it would be rendering something like...

   <div class="row" data-bind="foreach: degreeCodes">
                    <label class="text-muted" data-bind="text: DegreeName"> Degree1</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree2</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree3</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree4</label>
    <div>

        <div class="row" data-bind="foreach: degreeCodes">
                    <label class="text-muted" data-bind="text: DegreeName"> Degree5</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree6</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree7</label>
                    <label class="text-muted" data-bind="text: DegreeName"> Degree8</label>
    <div>

推荐答案

我将创建一个computed，它简单地从原始数组中返回一个包含4个元素的子数组的数组，然后使用两个嵌套的foreach循环；外部的可能是在计算数组上循环的无容器绑定，内部的类似于您现在正在执行的操作，即遍历每个4数组.

I'd create a computed that simply returns an array of 4-element subarrays from the original array, and then use two nested foreach loops; the outer one would probably be a containerless binding looping over the computed array, with the inner one being similar to what you're doing now, looping over each 4-array.

类似的东西:

vm.byFour=ko.computed(function() {
  var source=ko.unwrap(vm.degreeCodes);
  var result=[];
  for (var i=0; i<source.length; i+=4) {
    result.push(source.slice(i, i+4);
  }
  return result;
});

...

<!-- ko: foreach: {data: byFour, as: degreeCodes} -->
<div class="row" data-bind="foreach: degreeCodes">
   <label class="text-muted" data-bind="text: DegreeName">></label>
<div>
<!-- /ko -->

这篇关于淘汰赛js foreach将大型数据逐行绑定到模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！