Question

我使用knockout和bootstrap css进行如下数据绑定。我有   这个程度编码jSON，让我们说40个项目。但在UI方面我   每个<div class="row" >只需要4个

第五个应该创建一个新的<div class="row" >并添加内容   那里。所以，如果它正常工作，它将有10 <div class="row" >
各有4项
<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>

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

   <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>

Answer 1

Knockout的foreach绑定不够复杂，无法处理这个问题。您需要细分数据，以便基本上只有四个项目的阵列数组。然后你可以做一个嵌套的foreach循环遍历它们。

Answer 2

我创建一个computed，只返回原始数组中的4元素子数组，然后使用两个嵌套的foreach循环;外部的一个可能是一个无容器的绑定循环在计算的数组上，内部的一个类似于你现在正在做的，循环遍历每个4数组。

类似的东西：

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 -->

Knockout js foreach将大数据绑定到逐行模板

2 个答案: